From e2e1565f5cd3154c0f515dbe3d88c9943dd0580e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Aug 2014 17:41:04 -0400 Subject: group walls and render using 'wireframe' look --- .../assets/javascripts/rectangles/util/colors.js | 3 +- public/assets/javascripts/rectangles/util/sort.js | 33 ++++++++++++++++++++-- 2 files changed, 33 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/util/colors.js b/public/assets/javascripts/rectangles/util/colors.js index 95827cc..16d34dd 100644 --- a/public/assets/javascripts/rectangles/util/colors.js +++ b/public/assets/javascripts/rectangles/util/colors.js @@ -58,7 +58,8 @@ select.blur() }) - window.colors = color_palettes[select ? select.value : 'alphaQuad'] + window.colors = color_palettes[select ? select.value : 'colors'] +// window.colors = color_palettes[select ? select.value : 'alphaQuad'] window.grayColors = {} _.zip([FRONT, LEFT, BACK, RIGHT], color_palettes.alphaQuad).map(function(pair){ window.grayColors[pair[0]] = pair[1] diff --git a/public/assets/javascripts/rectangles/util/sort.js b/public/assets/javascripts/rectangles/util/sort.js index 7aa40a2..cf8d6b1 100644 --- a/public/assets/javascripts/rectangles/util/sort.js +++ b/public/assets/javascripts/rectangles/util/sort.js @@ -95,9 +95,38 @@ return a.x < b.x ? -1 : a.x == b.x ? 0 : 1 } sort.compare_z = function (a,b){ - return a.z > b.z ? -1 : a.z == b.z ? 0 : 1 + return a.z < b.z ? -1 : a.z == b.z ? 0 : 1 } - + sort.compare_xz = function(a,b){ + if (a.x < b.x) { + return -1 + } + if (a.x > b.x) { + return 1 + } + if (a.z < b.z) { + return -1 + } + if (a.z > b.z) { + return 1 + } + return 0 + } + sort.compare_zx = function(a,b){ + if (a.z < b.z) { + return -1 + } + if (a.z > b.z) { + return 1 + } + if (a.x < b.x) { + return -1 + } + if (a.x > b.x) { + return 1 + } + return 0 + } if ("window" in this) { window.sort = sort } -- cgit v1.2.3-70-g09d2 From b07ed6868895f883640fc003ba4f5cc108c27b3e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 13 Aug 2014 18:30:28 -0400 Subject: pull in minotaur --- .../assets/javascripts/rectangles/util/minotaur.js | 58 ++++++++++++++++++++++ public/assets/javascripts/ui/_router.js | 1 + 2 files changed, 59 insertions(+) create mode 100644 public/assets/javascripts/rectangles/util/minotaur.js (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js new file mode 100644 index 0000000..b4c81f0 --- /dev/null +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -0,0 +1,58 @@ +$(function(){ + + var Monitor = function () { + var base = this; + base.$el = $("#save"); + base.timeout = null; + base.delay = 500; + base.objects = {}; + + base.init = function () { + base.$el.addClass('saved').html('Save'); + base.$el.click(base.save); + } + + base.watch = function (object) { + base.objects[object.type] = base.objects[object.type] || {}; + base.objects[object.type][object.id] = object; + base.clear(); + base.timeout = setTimeout(base.save, base.delay); + }; + + base.clear = function () { + if (base.timeout) clearTimeout(base.timeout); + base.timeout = false; + }; + + base.save = function () { + var saving = false; + base.clear(); + + for (var type in base.objects) { + for (var id in base.objects[type]) { + if (base.timeout) + return; + var obj = base.objects[type][id]; + if (obj) obj.save(function(){ + base.$el.removeClass('unsaved saving').addClass('saved').html('Saved'); + saving = true; + }); + base.objects[type][id] = false; + } + } + + if (saving) { + base.$el.removeClass('unsaved saved').addClass('saving').html('Saving'); + } + else { + base.$el.removeClass('unsaved saving').addClass('saved').html('Saved'); + } + + base.objects = {}; + }; + + base.init(); + }; + + window.Minotaur = new Monitor (); +}); diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index d07810e..794079e 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -27,6 +27,7 @@ var SiteRouter = Router.extend({ "/profile": 'profile', "/profile/edit": 'editProfile', + "/profile/:name": 'profile', "/about/:name/edit": 'editDocument', "/about/new": 'newDocument', -- cgit v1.2.3-70-g09d2 From 0f649f2cfb034ad8458f08c8f23a2251135af059 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 13 Aug 2014 19:18:44 -0400 Subject: css --- .../assets/javascripts/rectangles/util/minotaur.js | 23 +++++++++++----------- public/assets/stylesheets/app.css | 19 +++++++++++++++++- views/partials/header.ejs | 4 ++++ 3 files changed, 34 insertions(+), 12 deletions(-) (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index b4c81f0..6eb36ec 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -1,14 +1,14 @@ -$(function(){ +(function(){ var Monitor = function () { var base = this; - base.$el = $("#save"); + base.$el = $("#minotaur"); base.timeout = null; base.delay = 500; base.objects = {}; base.init = function () { - base.$el.addClass('saved').html('Save'); + base.$el.addClass('saved'); base.$el.click(base.save); } @@ -17,12 +17,12 @@ $(function(){ base.objects[object.type][object.id] = object; base.clear(); base.timeout = setTimeout(base.save, base.delay); - }; + } base.clear = function () { if (base.timeout) clearTimeout(base.timeout); base.timeout = false; - }; + } base.save = function () { var saving = false; @@ -34,7 +34,7 @@ $(function(){ return; var obj = base.objects[type][id]; if (obj) obj.save(function(){ - base.$el.removeClass('unsaved saving').addClass('saved').html('Saved'); + base.$el.removeClass('unsaved saving').addClass('saved'); saving = true; }); base.objects[type][id] = false; @@ -42,17 +42,18 @@ $(function(){ } if (saving) { - base.$el.removeClass('unsaved saved').addClass('saving').html('Saving'); + base.$el.removeClass('unsaved saved').addClass('saving'); } else { - base.$el.removeClass('unsaved saving').addClass('saved').html('Saved'); + base.$el.removeClass('unsaved saving').addClass('saved'); } base.objects = {}; - }; + } base.init(); - }; + } window.Minotaur = new Monitor (); -}); + +})() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e15ba84..63a4496 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -629,7 +629,24 @@ iframe.embed { background-size: 100% 100%; } - +#minotaur { + position: absolute; + top: 26px; + right: 260px; + opacity: 0; +} +#minotaur .label:after { + padding: 6px; + font-size: 13px; + font-weight: 300; +} +#minotaur.saving { + background: #8fd; + opacity: 1; +} +#minotaur.saving .label:after { + content: 'SAVING'; +} .rapper { position:relative; diff --git a/views/partials/header.ejs b/views/partials/header.ejs index e83f42a..6697aff 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -1,5 +1,9 @@ +
+ +
+ [[ if (logged_in) { ]] -- cgit v1.2.3-70-g09d2 From 410607684c7273a61f937635b41397208e245473 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 14 Aug 2014 13:57:42 -0400 Subject: autosave --- .../javascripts/rectangles/engine/scenery/move.js | 8 ++- .../rectangles/engine/scenery/resize.js | 3 + .../javascripts/rectangles/engine/scenery/undo.js | 18 ++++++ .../assets/javascripts/rectangles/models/wall.js | 3 + .../assets/javascripts/rectangles/util/minotaur.js | 67 ++++++++++++---------- .../javascripts/ui/builder/BuilderSettings.js | 3 + .../assets/javascripts/ui/editor/EditorSettings.js | 10 +++- public/assets/javascripts/ui/editor/MediaEditor.js | 1 + public/assets/javascripts/ui/lib/FormView.js | 28 +++++++-- public/assets/javascripts/ui/lib/View.js | 17 +++--- views/partials/scripts.ejs | 1 + 11 files changed, 111 insertions(+), 48 deletions(-) (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index c3f78d7..edeb24b 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -30,6 +30,9 @@ Scenery.move = function(base){ redo: { id: base.id }, }) + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + Scenery.remove(base.id) return } @@ -81,7 +84,10 @@ Scenery.move = function(base){ undo: oldState, redo: base.serialize(), }) - + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + oldState = null } diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index c5c754a..6b2e52c 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -200,6 +200,9 @@ Scenery.resize = new function(){ redo: obj.serialize(), }) + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + document.body.classList.remove("dragging") } diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index 7798550..54ab755 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -4,9 +4,15 @@ type: "create-scenery", undo: function(state){ Scenery.remove(state.id) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) }, redo: function(state){ Scenery.deserialize([ state ]) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) }, }, { @@ -19,6 +25,9 @@ if (editor.permissions.resize) { Scenery.resize.show(scenery) } + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) }, redo: function(state){ var scenery = Scenery.find(state.id) @@ -30,15 +39,24 @@ Scenery.resize.rotate_dots() Scenery.resize.move_dots() } + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) }, }, { type: "destroy-scenery", undo: function(state){ Scenery.deserialize([ state ]) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) }, redo: function(state){ Scenery.remove(state.id) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) }, }, diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 6e2c728..fa09444 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -50,6 +50,9 @@ window.Wall = (function(){ undo: { id: scenery.id }, redo: scenery.serialize(), }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) } else if (Scenery.nextWallpaper) { base.wallpaper() diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index 6eb36ec..039a053 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -1,54 +1,59 @@ (function(){ var Monitor = function () { - var base = this; - base.$el = $("#minotaur"); - base.timeout = null; - base.delay = 500; - base.objects = {}; + var base = this + base.$el = $("#minotaur") + base.timeout = null + base.delay = 500 + base.objects = {} base.init = function () { - base.$el.addClass('saved'); - base.$el.click(base.save); + base.$el.removeClass() + base.$el.click(base.save) } base.watch = function (object) { - base.objects[object.type] = base.objects[object.type] || {}; - base.objects[object.type][object.id] = object; - base.clear(); - base.timeout = setTimeout(base.save, base.delay); + base.objects[object.type] = base.objects[object.type] || {} + base.objects[object.type][object._id] = object + base.clear() + base.timeout = setTimeout(base.save, base.delay) + } + + base.unwatch = function (object) { + if (base.objects[object.type] && base.objects[object.type][object._id]) { + delete base.objects[object.type][object._id] + } } base.clear = function () { - if (base.timeout) clearTimeout(base.timeout); - base.timeout = false; + if (base.timeout) clearTimeout(base.timeout) + base.timeout = false } base.save = function () { - var saving = false; - base.clear(); + var saving = false + base.clear() for (var type in base.objects) { for (var id in base.objects[type]) { - if (base.timeout) - return; - var obj = base.objects[type][id]; - if (obj) obj.save(function(){ - base.$el.removeClass('unsaved saving').addClass('saved'); - saving = true; - }); - base.objects[type][id] = false; + var obj = base.objects[type][id] + if (obj) { + obj.save(null, function(){ base.hide() }, function(){}) + } + delete base.objects[type][id] + saving = true } } - if (saving) { - base.$el.removeClass('unsaved saved').addClass('saving'); - } - else { - base.$el.removeClass('unsaved saving').addClass('saved'); - } - - base.objects = {}; + saving ? base.show() : base.hide() + } + + base.show = function () { + base.$el.removeClass().addClass('saving') + } + + base.hide = function () { + base.$el.removeClass() } base.init(); diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index c551f95..0091454 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -122,6 +122,9 @@ var BuilderSettings = FormView.extend({ this.$name.val(data.name) this.action = this.updateAction + Minotaur.unwatch(this) + Minotaur.hide() + window.history.pushState(null, document.title, "/layout/" + data.slug) }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index d6a79fb..9d75f66 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -5,7 +5,7 @@ var EditorSettings = FormView.extend({ createAction: "/api/project/new", updateAction: "/api/project/edit", destroyAction: "/api/project/destroy", - + events: { "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', @@ -32,7 +32,10 @@ var EditorSettings = FormView.extend({ data.rooms && Rooms.deserialize(data.rooms) data.startPosition && scene.camera.move(data.startPosition) - if (! data.isNew) { + if (data.isNew) { + this.$name.val( "Room " + moment().format("DD/MM/YYYY ha") ) + } + else { // console.log(data) this.$id.val( data._id ) @@ -130,6 +133,9 @@ var EditorSettings = FormView.extend({ this.$name.val(data.name) this.action = this.updateAction + Minotaur.unwatch(this) + Minotaur.hide() + window.history.pushState(null, document.title, "/project/" + data.slug + "/edit") }, diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index e3a8f2e..cc924da 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -4,6 +4,7 @@ var MediaEditor = FormView.extend({ events: { "keydown": 'stopPropagation', + "focus [name]": "clearMinotaur", "click [data-role=play-media]": "togglePaused", "mousedown [name=keyframe]": "stopPropagation", "mousedown": "stopPropagation", diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js index 219952d..ab33bc0 100644 --- a/public/assets/javascripts/ui/lib/FormView.js +++ b/public/assets/javascripts/ui/lib/FormView.js @@ -54,15 +54,20 @@ var FormView = View.extend({ return fd }, - save: function(e){ - e.preventDefault() + save: function(e, successCallback, errorCallback){ + e && e.preventDefault() this.$errors.hide().css("opacity", 0.0); if (this.validate) { var errors = this.validate() if (errors && errors.length) { - this.showErrors(errors) + if (errorCallback) { + errorCallback(errors) + } + else { + this.showErrors(errors) + } return } } @@ -74,18 +79,29 @@ var FormView = View.extend({ dataType: "json", processData: false, contentType: false, - }); + }) + request.done($.proxy(function (response) { if (response.error) { var errors = [] for (var key in response.error.errors) { errors.push(response.error.errors[key].message); } - this.showErrors(errors) + if (errorCallback) { + errorCallback(errors) + } + else { + this.showErrors(errors) + } return } else { - this.success && this.success(response) + if (successCallback) { + successCallback(response) + } + if (this.success) { + this.success(response) + } } }, this)); } diff --git a/public/assets/javascripts/ui/lib/View.js b/public/assets/javascripts/ui/lib/View.js index 999a0e5..d94e6db 100644 --- a/public/assets/javascripts/ui/lib/View.js +++ b/public/assets/javascripts/ui/lib/View.js @@ -1,13 +1,14 @@ var View = (function($, _){ var View = function(options) { - this.cid = _.uniqueId('view'); + this._id = _.uniqueId('view') + this.type = "view" options || (options = {}); - _.extend(this, _.pick(options, viewOptions)); - this._ensureElement(); - this.initialize.apply(this, arguments); - this.delegateEvents(); - }; + _.extend(this, _.pick(options, viewOptions)) + this._ensureElement() + this.initialize.apply(this, arguments) + this.delegateEvents() + } var delegateEventSplitter = /^(\S+)\s*(.*)$/; @@ -58,7 +59,7 @@ var View = (function($, _){ var match = key.match(delegateEventSplitter); var eventName = match[1], selector = match[2]; method = _.bind(method, this); - eventName += '.delegateEvents' + this.cid; + eventName += '.delegateEvents' + this._id; if (selector === '') { this.$el.on(eventName, method); } else { @@ -70,7 +71,7 @@ var View = (function($, _){ // Clears all callbacks previously bound to the view with `delegateEvents`. undelegateEvents: function() { - this.$el.off('.delegateEvents' + this.cid); + this.$el.off('.delegateEvents' + this._id); return this; }, diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index dfb3a83..4839de8 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -30,6 +30,7 @@ + -- cgit v1.2.3-70-g09d2 From 24870ab6ebd31c18b3533ec96ff04ad16153c844 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 19 Aug 2014 18:19:02 -0400 Subject: bounds tester --- .../assets/javascripts/rectangles/models/rect.js | 1 + .../javascripts/rectangles/models/surface.js | 4 +- public/assets/javascripts/rectangles/util/mouse.js | 2 +- public/assets/test/surface.html | 77 ++++++++++++++++++++++ test/07-test-surface.js | 58 ++++++++++++++-- 5 files changed, 136 insertions(+), 6 deletions(-) create mode 100644 public/assets/test/surface.html (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index f23ab9e..67852b4 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -139,6 +139,7 @@ } Rect.prototype.width = function(){ return this.x.length() } Rect.prototype.height = function(){ return this.y.length() } + Rect.prototype.delta = function(){ return new vec2( this.x.magnitude(), this.y.magnitude() ) } Rect.prototype.toString = function(){ var sides = sidesToString(this.sides) var s = "[" + this.x.toString() + " " + this.y.toString() + "] " + sides diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js index 3f43ec2..f7fe890 100644 --- a/public/assets/javascripts/rectangles/models/surface.js +++ b/public/assets/javascripts/rectangles/models/surface.js @@ -113,7 +113,9 @@ return old_bounds } - var center_index = this.index_for_x( position.a + dimension.a/2 + delta.a, 0 ) + var left_index = this.index_for_x( position.a + dimension.a/2 + delta.a, 0 ) + var center_index = this.index_for_x( position.a + dimension.a/2 + delta.a, left_index ) + var right_index = this.index_for_x( position.a + dimension.a/2 + delta.a, center_index ) var new_bounds = this.bounds_at_index_with_dimensions(center_index, dimension) this.clamp_delta(new_bounds, dimension, position, delta) diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index 06958af..fea3376 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -8,7 +8,7 @@ // cursor.x.a // cursor.y.a }, - move: function(e, cursor, delta){ + move: function(e, cursor){ // delta.a (x) // delta.b (y) }, diff --git a/public/assets/test/surface.html b/public/assets/test/surface.html new file mode 100644 index 0000000..85e3a7b --- /dev/null +++ b/public/assets/test/surface.html @@ -0,0 +1,77 @@ + + + + + + + + + + diff --git a/test/07-test-surface.js b/test/07-test-surface.js index 8a6d3d0..a9feffa 100644 --- a/test/07-test-surface.js +++ b/test/07-test-surface.js @@ -223,10 +223,11 @@ describe('door surface', function(){ }) }) - var position = new vec2(1, 2) + var position = new vec2(1, 1) var bounds = surface.bounds_at_index_with_dimensions(0, small) describe('#translate()', function(){ + /* it("does not alter a zero delta", function(){ var delta = new vec2(0,0) var new_bounds = surface.translate(bounds, small, position, delta) @@ -277,16 +278,65 @@ describe('door surface', function(){ console.log(new_bounds+"") assert.equal(true, delta.eq(new vec2( 5, 0 ))) }) - it("clamps upward delta", function(){ + */ + it("clamps upward delta 0,10", function(){ var delta = new vec2(0, 10) - surface.translate(bounds, small, position, delta) + var new_bounds = surface.translate(bounds, small, position, delta) + console.log(new_bounds+" <<<__c:w<") + console.log(delta+"") assert.equal(true, delta.eq(new vec2( 0, 1 ))) }) + it("clamps upward delta 1,10", function(){ + var delta = new vec2(1, 10) + var new_bounds = surface.translate(bounds, small, position, delta) + console.log(new_bounds+" <<<__c:w<") + console.log(delta+"") + assert.equal(true, delta.eq(new vec2( 1, 1 ))) + }) + it("clamps upward delta 2,10", function(){ + var delta = new vec2(2, 10) + var new_bounds = surface.translate(bounds, small, position, delta) + console.log(new_bounds+" <<<__c:w<") + console.log(delta+" <<<<<<<<<") + assert.equal(true, delta.eq(new vec2( 2, 1 ))) + }) + it("clamps upward delta 3,10", function(){ + var delta = new vec2(3, 10) + var bounds2 = surface.translate(bounds, small, position, delta) + console.log(bounds2+" <<<__c:w<") + console.log(delta+"") + assert.equal(true, delta.eq(new vec2( 3, 1 ))) + }) + it("clamps upward delta 4,10", function(){ + var delta = new vec2(4, 10) + var bounds2 = surface.translate(bounds, small, position, delta) + console.log(bounds2+" <<<__c:w<") + console.log(delta+"") + assert.equal(true, delta.eq(new vec2( 4, 1 ))) + }) + it("clamps upward delta 5,10", function(){ + var delta = new vec2(5, 10) + var bounds2 = surface.translate(bounds, small, position, delta) + console.log(bounds2+" <<<__c:w<") + console.log(delta+"") + assert.equal(true, delta.eq(new vec2( 5, 1 ))) + }) + it("clamps upward delta 6,10", function(){ + var delta = new vec2(6, 10) + var bounds2 = surface.translate(bounds, small, position, delta) + console.log(bounds2+" <<<__c:w<") + console.log(delta+"") + assert.equal(true, delta.eq(new vec2( 6, 1 ))) + }) +/* it("clamps downward delta", function(){ var delta = new vec2(0, -10) - surface.translate(bounds, small, position, delta) + var new_bounds = surface.translate(bounds, small, position, delta) + console.log(new_bounds+" <<<__c:w<") + console.log(delta+"") assert.equal(true, delta.eq(new vec2( 0, -1 ))) }) +*/ }) -- cgit v1.2.3-70-g09d2 From 978634c1c323240f36548468703a9512710c60e7 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Fri, 22 Aug 2014 12:11:40 -0400 Subject: wall placement --- .../rectangles/engine/scenery/_scenery.js | 14 +++--- .../javascripts/rectangles/engine/scenery/move.js | 14 +++--- .../rectangles/engine/scenery/types/_object.js | 58 +++++++++++----------- .../rectangles/engine/scenery/types/image.js | 5 +- .../rectangles/engine/scenery/types/video.js | 4 +- .../assets/javascripts/rectangles/models/wall.js | 40 +++++++++------ public/assets/javascripts/rectangles/util/mouse.js | 8 +-- 7 files changed, 76 insertions(+), 67 deletions(-) (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 5d36b4f..58592d4 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -29,14 +29,14 @@ var Scenery = new function(){ return scene_media } - base.addNextToWall = function(wall, index){ - base.add({ - wall: wall, - media: base.nextMedia, - index: index || 0, - }) + base.addNextToWall = function(opt){ + opt.media = base.nextMedia + opt.index = opt.index || 0 + var scene_media = base.add(opt) + + // test if scenery was placed here base.nextMedia = null - return media + return scene_media } base.find = function(id){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index f2d37d8..47e155b 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -91,21 +91,21 @@ Scenery.move = function(base){ oldState = null } - function switch_wall (e, new_wall, cursor){ + function switch_wall (e, target, cursor){ if (! dragging) return - if (new_wall.id == base.wall.id) return - if (! new_wall.fits(base.media, base.scale)) return + if (target.wall.id == base.wall.id) return + if (! target.wall.fits(base.media, base.scale)) return var old_wall_side = base.wall.side - var wall_group = old_wall_side | new_wall.side + var wall_group = old_wall_side | target.wall.side - base.set_wall(new_wall) + base.set_wall(target) bounds = base.bounds x = base.center.a z = base.center.b - if (old_wall_side !== new_wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) { + if (old_wall_side !== target.wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) { switch (old_wall_side) { case FRONT: z = bounds.x.a @@ -127,7 +127,7 @@ Scenery.move = function(base){ base.mx.move({ x: x, z: z, - rotationY: wall_rotation[ new_wall.side ] + rotationY: wall_rotation[ target.wall.side ] }) if (editor.permissions.resize) { diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 70d1d26..7b716f6 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -8,20 +8,36 @@ Scenery.types.base = Fiber.extend(function(base){ this.id = opt.id || Scenery.uid("scenery") this.move = new Scenery.move (this) this.media = opt.media - this.dimensions = new vec2(this.media.width, this.media.height) - this.scale = this.media.scale + this.naturalDimensions = new vec2(this.media.width, this.media.height) - this.scaleDimensions = this.dimensions.clone().mul(this.media.scale) + this.set_scale( opt.scale || this.media.scale || 1.0 ) this.position = new vec2(0,0) - if (opt.data && opt.data.position) { - // position is the coordinate of one of the corners with respect to a - // wall surface - // subtract x/z offset of wall - } + }, - if (opt.wall) { - this.set_wall(opt.wall, index) + set_wall: function(opt){ + this.wall = opt.wall || this.wall + this.bounds = this.wall.surface.bounds_at_index_with_dimensions(opt.index || 0, this.dimensions) + }, + + 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) + }, + + recenter: function () { + var center = this.bounds.center() + center.a -= this.dimensions.a / 2 + center.b -= this.dimensions.b / 2 + console.log(center+"") + var mx_position = this.wall.positionToMx( center, this.dimensions ) + console.log(mx_position) + console.log(this.wall.surface.faces.join("\n")) + // also supply scale? + this.mx.move(mx_position) + this.position.assign(center) }, bind: function(){ @@ -49,6 +65,7 @@ Scenery.types.base = Fiber.extend(function(base){ this.move = null this.media = null this.dimensions = null + this.naturalDimensions = null this.wall = null this.bounds = null this.center = null @@ -68,26 +85,6 @@ Scenery.types.base = Fiber.extend(function(base){ } }, - set_wall: function(wall, index){ - this.wall = wall || this.wall - // this.bounds = this.wall.bounds_for(this.media, this.scale) - // this.center = this.wall.center() - }, - - set_scale: function(scale){ - this.scale = this.mx.scale = this.mx.ops.scale = scale || 1.0 - }, - - recenter: function(){ - this.mx.move({ - x: this.center.a, - y: Rooms.list[this.wall.room].height/2 - 20, - z: this.center.b, - scale: this.scale, - rotationY: wall_rotation[ this.wall.side ], - }) - }, - serialize: function(){ var data = { id: this.id, @@ -95,6 +92,7 @@ Scenery.types.base = Fiber.extend(function(base){ side: this.wall && this.wall.side, dimensions: this.dimensions.serialize(), position: app.position(this.mx), + scale: this.scale, media: this.media, } return data diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index 576242e..1582e0f 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -4,17 +4,18 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ var exports = { init: function(opt){ + opt.scale = opt.scale || 300 / max(300, opt.media.width) + base.init.call(this, opt) - this.scale = 300 / max(300, this.media.width) this.build() this.bind() - this.set_wall() if (opt.data) { this.deserialize(opt.data) } else { + this.set_wall(opt) this.recenter() } }, diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index 0bd5c06..e8bc7f7 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -4,12 +4,12 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ var exports = { init: function(opt){ + opt.scale = opt.scale || 300 / max(300, opt.media.width) + base.init.call(this, opt) - this.scale = this.media.scale = 300 / max(300, this.media.width) this.build() this.bind() - this.set_wall() if (opt.data) { this.deserialize(opt.data) diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 3afe49a..a8bcbd8 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -44,7 +44,10 @@ mouseover: function(){ }, mouseenter: function(e){ - Scenery.mouse.mouseenter(e, base, mx) + Scenery.mouse.mouseenter(e, { + wall: base, + index: index, + }) }, mousemove: function(e){ }, @@ -52,7 +55,13 @@ // base.randomize_colors() // console.log(sidesToString(base.side)) if (Scenery.nextMedia) { - var scenery = Scenery.addNextToWall(base, index) + var scenery = Scenery.addNextToWall({ + wall: base, + index: index + }) + + // scenery was not placed + if (! scenery) return UndoStack.push({ type: 'create-scenery', @@ -80,53 +89,55 @@ // side: corresponds to the orientation of this wall // vec: equivalent to the bounds of the Surface // edge: the coordinate of the normal of this surface - // var useX = side & FRONT_BACK + // var useX = side & LEFT_RIGHT // var useA = side & (FRONT | LEFT) - // mx.rect[useX ? 'y': 'x'][ useA ? 'a': 'b'] - // surface: an ordered set of contiguous wall regions + // edge = mx.rect[useX ? 'x': 'y'][ useA ? 'a': 'b'] + // surface: an ordered set of contiguous wall regions, corresponding to mx objects Wall.prototype.positionToMx = function(position, dimension) { + var x, z switch (this.side) { case FRONT: - x = this.vec.a + position.a + dimension.a / 2 + x = position.a + dimension.a / 2 z = this.edge + painting_distance_from_wall break case BACK: - x = this.vec.a + position.a + dimension.a / 2 + x = position.a + dimension.a / 2 z = this.edge - painting_distance_from_wall break case LEFT: x = this.edge + painting_distance_from_wall - z = this.vec.a + position.a + dimension.a / 2 + z = position.a + dimension.a / 2 break case RIGHT: x = this.edge - painting_distance_from_wall - z = this.vec.a + position.a + dimension.a / 2 + z = position.a + dimension.a / 2 break } return { x: x, - y: position.b + dimension.b / 2 + y: position.b + dimension.b / 2, z: z, + rotationY: wall_rotation[ this.side ], } } Wall.prototype.mxToPosition = function(mx) { var position = new vec2(0,0) switch (this.side) { case FRONT: - position.a = mx.x - mx.width / 2 - this.vec.a + position.a = mx.x - mx.width / 2 position.b = mx.y - mx.height / 2 break case BACK: - position.a = mx.x - mx.width / 2 - this.vec.a + position.a = mx.x - mx.width / 2 position.b = mx.y - mx.height / 2 break case LEFT: - position.a = mx.z - mx.width / 2 - this.vec.a + position.a = mx.z - mx.width / 2 position.b = mx.y - mx.height / 2 break case RIGHT: - position.a = mx.z - mx.width / 2 - this.vec.a + position.a = mx.z - mx.width / 2 position.b = mx.y - mx.height / 2 break } @@ -200,7 +211,6 @@ var shouldFlip = this.side & (LEFT | BACK) var mx = this.mx - // console.log( sidesToString(this.side), mx.length ) if (! shouldFlip) { mx = mx.reverse() } diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index fea3376..34d3f5e 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -138,15 +138,15 @@ function mouse (opt) { base.tube("move", e, base.cursor) } } - base.mouseenter = function(e, el){ + base.mouseenter = function(e, target, index){ if (! base.down) return if (opt.use_offset && ! offset) return - base.tube("enter", e, el, base.cursor) + base.tube("enter", e, target, base.cursor) } - base.mouseleave = function(e, el){ + base.mouseleave = function(e, target){ if (! base.down) return if (opt.use_offset && ! offset) return - base.tube("leave", e, el, base.cursor) + base.tube("leave", e, target, base.cursor) } base.mouseup = function(e){ var pos, new_cursor -- cgit v1.2.3-70-g09d2