diff options
Diffstat (limited to 'public/assets/javascripts/rectangles/engine')
10 files changed, 324 insertions, 56 deletions
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 8e1fe5a..3e185d2 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -29,7 +29,7 @@ Map.Draw = function(map, opt){ ctx.translate( map.center.a, map.center.b ) ctx.scale( -1, 1 ) - draw.regions(Rooms.regions, colors) + draw.regions(Rooms.regions, [ "#f8f8f8" ]) draw.mouse(map.ui.mouse.cursor) draw.coords() scene && draw.camera(scene.camera) @@ -55,7 +55,7 @@ Map.Draw = function(map, opt){ } draw.clear = function(){ - ctx.fillStyle = "rgba(255,255,255,0.9)" + ctx.fillStyle = "rgba(255,255,255,0.98)" ctx.clearRect(0, 0, map.dimensions.a, map.dimensions.b) ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b) } diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 577ea32..9a557b9 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -30,6 +30,7 @@ Map.UI.Editor = function(map){ // function down (e, cursor){ + var room 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) @@ -52,22 +53,28 @@ Map.UI.Editor = function(map){ if (intersects.length && base.permissions.destroy) { base.mouse.down = false - Rooms.remove(intersects[0]) - app.tube("builder-destroy-room", intersects[0]) + + room = intersects[0] + + UndoStack.push({ + type: "destroy-room", + undo: room.copy(), + redo: { id: room.id }, + }) + + Rooms.remove(room) + app.tube("builder-destroy-room", room) return } - else if (intersects.length && (base.permissions.move || base.permissions.resize)) { + else if (intersects.length) { base.dragging = intersects[0] - base.resizing = base.permissions.resize && base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) + base.resizing = base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) base.dragging.rect.translation.sides = base.resizing app.tube("builder-pick-room", intersects[0]) } else if (base.permissions.create) { base.creating = true } - else if (intersects.length) { - app.tube("builder-pick-room", intersects[0]) - } if (e.shiftKey && base.dragging) { base.dragging.rect.quantize(10/map.zoom) @@ -77,6 +84,45 @@ Map.UI.Editor = function(map){ function move (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 intersects = Rooms.filter(function(r){ + return r.rect.contains(cursor.x.a, cursor.y.a) + }) + + if (base.permissions.destroy) { + map.el.className = "destroy" + } + else if (intersects.length) { + var edges = intersects[0].rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) + switch (edges) { + case FRONT_LEFT: + case BACK_RIGHT: + map.el.className = "nesw-resize" + break + + case FRONT_RIGHT: + case BACK_LEFT: + map.el.className = "nwse-resize" + break + + case FRONT: + case BACK: + map.el.className = "ns-resize" + break + + case LEFT: + case RIGHT: + map.el.className = "ew-resize" + break + + default: + map.el.className = "move" + break + } + } + else { + map.el.className = "" + } } function drag (e, cursor) { @@ -115,20 +161,40 @@ Map.UI.Editor = function(map){ cursor.x.abs().quantize(1) cursor.y.abs().quantize(1) var room = Rooms.add_with_rect( cursor ) + + UndoStack.push({ + type: "create-room", + undo: { id: room.id }, + redo: room.copy() + }) + app.tube("builder-pick-room", room) } } - if (base.resizing) { - base.dragging.rect.resize() - } - else if (base.dragging) { - base.dragging.rect.translate() - } + if (base.resizing || base.dragging) { + var oldState = base.dragging.copy() + + if (base.resizing) { + base.dragging.rect.resize() + } + else if (base.dragging) { + base.dragging.rect.translate() + } + + UndoStack.push({ + type: "update-room", + undo: oldState, + redo: base.dragging.copy() + }) + } + base.creating = base.dragging = base.resizing = false } + var wheelState, wheelTimeout + function mousewheel (e, val, delta){ var cursor = base.mouse.cursor @@ -137,8 +203,20 @@ Map.UI.Editor = function(map){ }) if (intersects.length) { + wheelState = wheelState || intersects[0].copy() + intersects[0].height = clamp( ~~(intersects[0].height - delta), height_min, height_max ) - Rooms.clipper.update() + + clearTimeout(wheelTimeout) + wheelTimeout = setTimeout(function(){ + UndoStack.push({ + type: "update-room", + undo: wheelState, + redo: intersects[0].copy() + }) + Rooms.clipper.update() + wheelState = null + }, 500) } else { map.set_zoom(map.zoom_exponent - delta/20) diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js index 4ad3bd8..cde9fbb 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/grouper.js +++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js @@ -1,6 +1,6 @@ (function(){ - var vec2, Rect, Rooms, UidGenerator, Wall, Surface, sort + var vec2, Rect, Rooms, UidGenerator, Wall, Surface, sort, _ if ('window' in this) { vec2 = window.vec2 Rect = window.Rect @@ -9,6 +9,7 @@ UidGenerator = window.UidGenerator Wall = window.Wall sort = window.sort + _ = window._ } else { Rooms = require('./_rooms') @@ -18,6 +19,7 @@ Wall = require('../../models/wall') Surface = require('../../models/surface') sort = require('../../util/sort') + _ = require('lodash') FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 PI = Math.PI HALF_PI = PI/2 @@ -82,6 +84,7 @@ collection.sort( useX ? sort.compare_zx : sort.compare_xz ) collection.forEach(function(mx){ if (last_mx && last_mx.rect.eq(mx.rect)) { + // culls half-walls if (last_mx.rect.id == mx.rect.id) { last_mx.height += mx.height/2 last_mx.y += mx.height/4 @@ -103,41 +106,53 @@ } base.group = function(walls, collections, side){ var collection = collections[side] - var wall var useX = side & FRONT_BACK - var useA = side & (FRONT | RIGHT) + var useA = side & (FRONT | LEFT) // collection.sort( useX ? sort.compare_zx : sort.compare_xz ) + var planes = {} + collection.forEach(function(mx){ if (mx.culled) return - var coplanar = wall && wall.edge == mx.rect[useX ? 'y': 'x'][useA ? 'a': 'b'] - - if (wall && coplanar) { - if (useX && wall.vec.b == mx.rect.x.a) { - wall.vec.b = mx.rect.x.b - wall.mx.push(mx) - wall.surface.add(mx.face) - return - } - else if (! useX && wall.vec.b == mx.rect.y.a) { - wall.vec.b = mx.rect.y.b - wall.mx.push(mx) - wall.surface.add(mx.face) - return - } - } - wall = new Wall ({ - id: base.uid(), - side: side, - mx: [ mx ], - surface: new Surface( mx.face ), - vec: mx.rect[ useX ? 'x' : 'y' ].clone(), - edge: mx.rect[ useX ? 'y' : 'x' ][ useA ? 'a' : 'b' ], - }) - walls.push(wall) + var edge = mx.rect[useX ? 'y': 'x'][ useA ? 'a': 'b'] + planes[edge] = planes[edge] || [] + planes[edge].push(mx) }) - + + var edges = _.keys(planes) + edges.forEach(function(edge){ + + var wall + + planes[edge].forEach(function(mx){ + + if (wall) { + if (useX && wall.vec.b == mx.rect.x.a) { + wall.vec.b = mx.rect.x.b + wall.mx.push(mx) + wall.surface.add(mx.face) + return + } + else if (! useX && wall.vec.b == mx.rect.y.a) { + wall.vec.b = mx.rect.y.b + wall.mx.push(mx) + wall.surface.add(mx.face) + return + } + } + wall = new Wall ({ + id: base.uid(), + side: side, + mx: [ mx ], + surface: new Surface( mx.face ), + vec: mx.rect[ useX ? 'x' : 'y' ].clone(), + edge: mx.rect[ useX ? 'y' : 'x' ][ useA ? 'a' : 'b' ], + }) + walls.push(wall) + }) + }) + return walls } diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 137c74a..b4a38f8 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -14,7 +14,7 @@ var Scenery = new function(){ base.add = function(opt){ var scene_media - switch (media.type) { + switch (opt.media.type) { case 'image': scene_media = new Scenery.types.image (opt) break @@ -36,8 +36,13 @@ var Scenery = new function(){ mx: mx }) base.nextMedia = null + return media } - + + base.find = function(id){ + return base.list[id] || null + } + base.remove = function(id){ var media = base.list[id] delete base.list[id] @@ -69,11 +74,11 @@ var Scenery = new function(){ scenery_data.forEach(function(data){ var wall = Rooms.walls[data.wall_id] var scene_media = base.add({ + data: data, wall: wall, media: data.media, id: data.id }) - scene_media.deserialize(data) }) } diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index cc5b014..f2d37d8 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -3,6 +3,7 @@ Scenery.move = function(base){ var x, y, z, bounds var dragging = false + var oldState this.bind = function(){ Scenery.mouse.bind_el(base.mx.el) @@ -23,6 +24,15 @@ Scenery.move = function(base){ function down (e, cursor){ if (e.target != base.mx.el) return; if (editor.permissions.destroy) { + UndoStack.push({ + type: 'destroy-scenery', + undo: base.serialize(), + redo: { id: base.id }, + }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + Scenery.remove(base.id) return } @@ -39,6 +49,7 @@ Scenery.move = function(base){ y = base.mx.y z = base.mx.z bounds = base.bounds + oldState = base.serialize() document.body.classList.add("dragging") } @@ -63,8 +74,21 @@ Scenery.move = function(base){ } function up (e, cursor){ + if (! dragging || ! oldState) return + dragging = false document.body.classList.remove("dragging") + + UndoStack.push({ + type: 'update-scenery', + undo: oldState, + redo: base.serialize(), + }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + oldState = null } function switch_wall (e, new_wall, cursor){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index df058bb..6b2e52c 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -7,6 +7,7 @@ Scenery.resize = new function(){ var x, y, z, bounds var dragging = false var dimensions, position, scale + var oldState var dots = [], dot, selected_dot @@ -54,7 +55,7 @@ Scenery.resize = new function(){ } // move all the dots to the object's current position - base.move_dots = function(){ + 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 @@ -88,7 +89,7 @@ Scenery.resize = new function(){ // pick a new object to focus on and show the dots base.show = function(new_object) { - if (obj === new_object) return + // if (obj === new_object) return obj = new_object base.add_dots() @@ -151,6 +152,7 @@ Scenery.resize = new function(){ dimensions = 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") } @@ -191,6 +193,16 @@ Scenery.resize = new function(){ if (! editor.permissions.resize) { return } obj.scale = obj.mx.ops.scale = obj.mx.scale obj.set_wall() + + UndoStack.push({ + type: 'update-scenery', + undo: oldState, + 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/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index aa1fefb..6bd5863 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -62,8 +62,12 @@ Scenery.types.base = Fiber.extend(function(base){ set_wall: function(wall, mx){ this.wall = wall || this.wall - this.bounds = this.wall.bounds_for(this.media, this.scale) - this.center = this.wall.center() + // 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(){ @@ -79,7 +83,6 @@ Scenery.types.base = Fiber.extend(function(base){ serialize: function(){ var data = { id: this.id, - room_id: this.wall.room_id, wall_id: this.wall.id, side: this.wall.side, dimensions: this.dimensions.serialize(), diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index 99c1810..576242e 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -10,7 +10,13 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ this.build() this.bind() this.set_wall() - this.recenter() + + if (opt.data) { + this.deserialize(opt.data) + } + else { + this.recenter() + } }, 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 79cfb1c..0bd5c06 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -10,7 +10,13 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ this.build() this.bind() this.set_wall() - this.recenter() + + if (opt.data) { + this.deserialize(opt.data) + } + else { + this.recenter() + } }, build: function(){ @@ -34,7 +40,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ y: this.scale * this.media.height/2, backface: false, }) - scene.add( this.mx ) + scene.add(this.mx) + this.mx.load() }, play: function(){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js new file mode 100644 index 0000000..54ab755 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -0,0 +1,118 @@ +(function(){ + UndoStack.register([ + { + 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 ) + }, + }, + { + type: "update-scenery", + undo: function(state){ + var scenery = Scenery.find(state.id) + scenery.deserialize(state) + scenery.set_wall(Rooms.walls[ state.wall_id ]) + + 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) + scenery.deserialize(state) + scenery.set_wall(Rooms.walls[ state.wall_id ]) + + if (editor.permissions.resize) { + Scenery.resize.show(scenery) + 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 ) + }, + }, + + // + + { + type: "create-room", + undo: function(room){ + Rooms.remove(room) + Rooms.clipper.update() + }, + redo: function(room){ + Rooms.add(new Room(room)) + Rooms.clipper.update() + app.tube("builder-pick-room", room) + }, + }, + { + type: "update-room", + undo: function(state){ + var room = Rooms.list[state.id] + room.rect.assign( state.rect ) + room.height = state.height + Rooms.clipper.update() + app.tube("builder-pick-room", room) + }, + redo: function(state){ + var room = Rooms.list[state.id] + room.rect.assign( state.rect ) + room.height = state.height + Rooms.clipper.update() + app.tube("builder-pick-room", room) + }, + }, + { + type: "destroy-room", + undo: function(room){ + Rooms.add(new Room(room)) + Rooms.clipper.update() + app.tube("builder-pick-room", room) + }, + redo: function(room){ + Rooms.remove(room) + Rooms.clipper.update() + }, + }, + + // + + { + type: "update-wallpaper", + undo: function(state){ + }, + redo: function(state){ + }, + }, + + ]) +})() |