diff options
| author | Jules Laplace <jules@okfoc.us> | 2015-04-01 19:30:22 -0400 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2015-04-01 19:30:22 -0400 |
| commit | 39f1a7136567ae7e0afbf085732853cc86123393 (patch) | |
| tree | a29c5f5ba7359ac8a7e51555e9ab28e729ff2344 | |
| parent | 3916282fc61cb1143dfc33d79dfc3169293b0969 (diff) | |
stub in 3d object ui
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/scenery/undo.js | 65 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js | 94 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/sculpture/types/image.js | 98 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/models/floor.js | 8 | ||||
| -rw-r--r-- | views/controls/editor/sculpture.ejs | 42 | ||||
| -rwxr-xr-x | views/editor.ejs | 1 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 3 |
7 files changed, 309 insertions, 2 deletions
diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index 1232780..b976ea2 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -195,5 +195,70 @@ }, }, + // + { + type: "create-sculpture", + undo: function(state){ + Sculpture.remove(state.id) + Sculpture.resize.hide() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + redo: function(state){ + var scenery = Sculpture.deserialize([ state ]) + Sculpture.resize.show( sculpture ) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + }, + { + type: "update-sculpture", + undo: function(state){ + var sculpture = Sculpture.find(state.id) + + sculpture.deserialize(state) + + if (editor.permissions.resize) { + Sculpture.resize.show(sculpture) + } + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + redo: function(state){ + var sculpture = Sculpture.find(state.id) + + sculpture.deserialize(state) + + if (editor.permissions.resize) { + Sculpture.resize.show(sculpture) + Sculpture.resize.move_dots() + Sculpture.resize.rotate_dots() + } + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + }, + { + type: "destroy-sculpture", + undo: function(state){ + var sculpture = Sculpture.deserialize([ state ]) + Sculpture.resize.show( sculpture ) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + redo: function(state){ + Sculpture.resize.hide() + Sculpture.remove(state.id) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + }, + }, + ]) })() diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js new file mode 100644 index 0000000..eb64e92 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js @@ -0,0 +1,94 @@ + +var Sculpture = new function(){ + + var base = this; + + base.list = {} + base.nextMedia = null + + base.mouse = new mouse ({ use_offset: false, mousedownUsesCapture: true }) + + base.init = function(){ + } + + base.add = function(opt){ + var scene_media + switch (opt.media.type) { + case 'image': + scene_media = new Sculpture.types.image (opt) + break + } + base.list[scene_media.id] = scene_media + return scene_media + } + + base.addNextToWall = function(opt){ + opt.newMedia = true + opt.media = base.nextMedia + opt.index = opt.index || 0 + var scene_media = base.add(opt) + + // test if scenery was placed here + if (! scene_media) { + return null + } + else { + base.nextMedia = null + return scene_media + } + } + + base.find = function(id){ + return base.list[id] || null + } + + base.remove = function(id){ + var scene_media = base.list[id] + delete base.list[id] + scene_media && scene_media.destroy() + } + + base.removeAll = function(){ + base.forEach(function(scene_media){ + base.remove(scene_media.id) + }) + } + + base.uid = new UidGenerator(base.list) + + base.forEach = function(f){ + return base.values().forEach(f) + } + + base.map = function(f){ + return base.values().map(f) + } + + base.values = function(){ + return _.values(base.list) + } + + base.serialize = function(){ + var sculptures = base.map(function(sculpture){ + return sculpture.serialize() + }) + return sculptures + } + + base.deserialize = function(sculpture_data){ + var added = [] + sculpture_data.forEach(function(data){ + var scene_media = base.add({ + id: data.id, + data: data, + media: data.media, + }) + added.push(scene_media) + }) + return added + } + + return base +} + +Sculpture.types = {} diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js new file mode 100644 index 0000000..af538f7 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -0,0 +1,98 @@ +Scenery.types.base = Fiber.extend(function(base){ + + var exports = { + + 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) + }, + + 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 }, + }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + Scenery.remove(this.id) + + 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() + } + }, + + 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, + 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, + } + return data + }, + } + + return exports + +}) diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index ac1f8c9..439c16a 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -68,8 +68,12 @@ } return } - - if (Scenery.nextWallpaper) { + + if (Scenery.nextMedia) { + e.preventDefault() + // + } + else if (Scenery.nextWallpaper) { var oldState = base.serialize() base.wallpaper(Scenery.nextWallpaper) // Scenery.nextWallpaper = null diff --git a/views/controls/editor/sculpture.ejs b/views/controls/editor/sculpture.ejs new file mode 100644 index 0000000..21e5039 --- /dev/null +++ b/views/controls/editor/sculpture.ejs @@ -0,0 +1,42 @@ +<div class="vvbox settings" id="sculptureEditor"> + <h4>3D Object</h4> + + <input type="hidden" name="_csrf" value="[[- token ]]"> + <input type="hidden" name="_id" value="new"> + + <div class="setting"> + <input type="text" name="name" placeholder="media title"> + </div> + + <div class="setting"> + <textarea name="description" placeholder="short description"></textarea> + </div> + + <div class="setting"> + <input type="checkbox" name="outline" value="1" id="sculpture_outline"> + <label for="sculpture_outline">Show outline?</label> + <input type="color" name="color" value="#000000"> + </div> + + <div class="setting"> + <input type="checkbox" name="billboard" value="1" id="sculpture_billboard"> + <label for="sculpture_billboard">Billboard?</label> + </div> + + <div class="setting number"> + <label for="sculpture-width">width</label> + <input type="text" class="units" name="width" id="sculpture-width"> + </div> + <div class="setting number"> + <label for="sculpture-height">height</label> + <input type="text" class="units" name="height" id="sculpture-height"> + </div> + <div class="setting number"> + <label for="sculpture-height">depth</label> + <input type="text" class="units" name="height" id="sculpture-height"> + </div> + <div class="setting"> + <a href="#" class="warn btn" data-role="destroy-sculpture">remove object</a> + </div> + +</div> diff --git a/views/editor.ejs b/views/editor.ejs index 74e4d6d..08959a0 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -16,6 +16,7 @@ [[ include controls/builder/info ]] [[ include controls/editor/media-drawer ]] [[ include controls/editor/media-editor ]] + [[ include controls/editor/sculpture ]] [[ include controls/editor/wallpaper ]] [[ include controls/editor/color-control ]] [[ include controls/editor/text-editor ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 72aaa8c..6cc5315 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -73,6 +73,9 @@ <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/text.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/video.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/_sculpture.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/image.js"></script> + <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/_map.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui_editor.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui_minimap.js"></script> |
