diff options
Diffstat (limited to 'public/assets/javascripts/rectangles')
18 files changed, 902 insertions, 293 deletions
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index dfabc86..f321f71 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -7,7 +7,7 @@ } else { MX = require('../../../../../../test/mocks/mx.js') - scene = MX.scene + scene = MX.Scene Rooms = require('./_rooms') sort = require('../../util/sort') FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 @@ -43,7 +43,7 @@ if (window.scene) { base.clear() base.build() - base.bind_walls() + Rooms.grouper.build() } } @@ -62,18 +62,7 @@ }) }.bind(this)) } - - base.bind_walls = function (){ - Rooms.forEach(function(room){ - room.walls = room.group_mx_walls() - room.walls.forEach(function(wall){ - Rooms.walls[ wall.id ] = wall - wall.bind() - wall.randomize_colors() - }) - }) - } - + base.clear = function (){ els.forEach(function(el){ scene.remove(el) @@ -84,7 +73,6 @@ this.build_walls = function (region) { var room = Rooms.list[ region.id ] - var list = [], el = null var width = region.x.length() @@ -305,7 +293,7 @@ el.side = 0 el.rect = null el.destroy = function(){ - this.el = this.rect = null + this.el = this.rect = this.face = null } // possible if walls are opaque diff --git a/public/assets/javascripts/rectangles/engine/rooms/grouper.js b/public/assets/javascripts/rectangles/engine/rooms/grouper.js new file mode 100644 index 0000000..cde9fbb --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/rooms/grouper.js @@ -0,0 +1,168 @@ +(function(){ + + var vec2, Rect, Rooms, UidGenerator, Wall, Surface, sort, _ + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + Surface = window.Surface + Rooms = window.Rooms + UidGenerator = window.UidGenerator + Wall = window.Wall + sort = window.sort + _ = window._ + } + else { + Rooms = require('./_rooms') + UidGenerator = require('../../util/uid') + vec2 = require('../../models/vec2') + Rect = require('../../models/rect') + 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 + TOP = CEILING, BOTTOM = FLOOR + function sidesToString(sides){ + var s = "" + if (sides & FRONT) s += "front " + if (sides & BACK) s += "back " + if (sides & LEFT) s += "left " + if (sides & RIGHT) s += "right " + if (sides & TOP) s += "top " + if (sides & BOTTOM) s += "bottom " + return s + } + } + + Rooms.grouper = new function(){ + + var base = this + + base.list = {} + + base.uid = new UidGenerator(base.list) + + base.build = function (){ + var walls = [] + var collections = base.collect() + base.cull(collections) + base.group(walls, collections, FRONT) + base.group(walls, collections, BACK) + base.group(walls, collections, LEFT) + base.group(walls, collections, RIGHT) + Rooms.walls = walls + base.bind() + } + base.collect = function(){ + var collections = {} + collections[FRONT] = [] + collections[BACK] = [] + collections[LEFT] = [] + collections[RIGHT] = [] + + Rooms.forEach(function(room){ + room.mx_walls.forEach(function(mx){ + var side = mx.side || mx.half_side + collections[side].push(mx) + }) + }) + + base.cull(collections) + + return collections + } + base.cull = function(collections){ + [FRONT, BACK, LEFT, RIGHT].forEach(function(side){ + var collection = collections[side] + var useX = side & FRONT_BACK + var useA = side & (FRONT | RIGHT) + var last_mx + var widthVec, heightVec + + 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 + last_mx.face.y.b += mx.height/2 + } + last_mx.side = side + mx.culled = true + mx.destroy() + scene.remove(mx) + return + } + widthVec = mx.rect[useX ? 'x' : 'y'].clone() + heightVec = new vec2( mx.y - mx.height/2, mx.y + mx.height/2 ) + mx.face = new Rect( widthVec, heightVec ) + last_mx = mx + }) + }) + return collections + } + base.group = function(walls, collections, side){ + var collection = collections[side] + var useX = side & FRONT_BACK + 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 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 + } + + base.bind = function(){ + Rooms.walls.forEach(function(wall){ + wall.bind() + wall.randomize_colors() + }) + } + + } + +})() diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index c96885c..2fd6122 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -12,27 +12,37 @@ var Scenery = new function(){ base.resize.init() } - base.add = function(wall, media, id){ + base.add = function(opt){ var scene_media - switch (media.type) { + switch (opt.media.type) { case 'image': - scene_media = new Scenery.types.image ({ media: media, wall: wall, id: id }) + scene_media = new Scenery.types.image (opt) break case 'video': case 'youtube': case 'vimeo': - scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id }) + scene_media = new Scenery.types.video (opt) break } base.list[scene_media.id] = scene_media return scene_media } - base.addNextToWall = function(wall){ - var media = base.add(wall, base.nextMedia) - base.nextMedia = null - return media + 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 + if (! scene_media.bounds) { + base.remove( scene_media.id ) + return null + } + else { + base.nextMedia = null + return scene_media + } } base.find = function(id){ @@ -40,9 +50,15 @@ var Scenery = new function(){ } base.remove = function(id){ - var media = base.list[id] + var scene_media = base.list[id] delete base.list[id] - media && media.destroy() + scene_media && scene_media.destroy() + } + + base.removeAll = function(){ + base.forEach(function(scene_media){ + base.remove(scene_media.id) + }) } base.uid = new UidGenerator(base.list) @@ -68,9 +84,13 @@ var Scenery = new function(){ base.deserialize = function(scenery_data){ scenery_data.forEach(function(data){ - var wall = Rooms.walls[data.wall_id] - var scene_media = base.add(wall, data.media, data.id) - scene_media.deserialize(data) + var wall = Rooms.walls[data.wall_id] || Rooms.walls[0] + var scene_media = base.add({ + data: data, + wall: wall, + media: data.media, + id: data.id + }) }) } diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index ef9bc32..93bccb0 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -1,7 +1,7 @@ Scenery.move = function(base){ - var x, y, z, bounds + var x, y, z, position, dimension, bounds var dragging = false var oldState @@ -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 } @@ -45,7 +48,11 @@ Scenery.move = function(base){ 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") } @@ -53,18 +60,28 @@ Scenery.move = function(base){ function drag (e, cursor){ if (! dragging) return - base.mx.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp ) + 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 = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) + base.mx.x = position.a + delta.a * cos(wall_rotation[base.wall.side]) + dimension.a / 2 break case LEFT: case RIGHT: - base.mx.z = bounds.x.clamp( z + sin(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) + base.mx.z = position.a + delta.a * sin(wall_rotation[base.wall.side]) + dimension.a / 2 break } - if (editor.permissions.resize) { Scenery.resize.move_dots() } @@ -76,60 +93,62 @@ Scenery.move = function(base){ dragging = false document.body.classList.remove("dragging") - console.log("pushing", oldState, base.serialize()) - 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){ + function switch_wall (e, target, cursor){ if (! dragging) return - if (new_wall.uid == base.wall.uid) return - if (! new_wall.fits(base.media, base.scale)) return - + if (target.wall.id == base.wall.id) 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 + var new_bounds = target.wall.surface.bounds_at_index_with_dimensions(target.index || 0, dimension) - base.set_wall(new_wall) + if (! new_bounds) return - 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) { + 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: - z = bounds.x.a + position.a = bounds.x.a + dimension.a / 2 break case BACK: - z = bounds.x.b + position.a = bounds.x.b - dimension.a / 2 break case LEFT: - x = bounds.x.a + position.a = bounds.x.a + dimension.a / 2 break case RIGHT: - x = bounds.x.b + position.a = bounds.x.b - dimension.a / 2 break } } - cursor.x.a = cursor.x.b - - base.mx.move({ - x: x, - z: z, - rotationY: wall_rotation[ new_wall.side ] - }) + var mx_delta = base.wall.positionToMx( position, dimension ) + base.mx.move(mx_delta) if (editor.permissions.resize) { Scenery.resize.rotate_dots() - Scenery.resize.move_dots() +// Scenery.resize.move_dots() } + + cursor.x.a = cursor.x.b + //var delta = cursor.delta() + drag(e, cursor) + } return this diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index c5c754a..d9cce18 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -6,7 +6,7 @@ Scenery.resize = new function(){ var obj var x, y, z, bounds var dragging = false - var dimensions, position, scale + var naturalDimension, dimension, position, scale var oldState var dots = [], dot, selected_dot @@ -148,8 +148,9 @@ Scenery.resize = new function(){ selected_dot = selection[0] dragging = true - - dimensions = obj.dimensions + + 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() @@ -165,7 +166,7 @@ Scenery.resize = new function(){ var width = cursor.x.magnitude() var height = cursor.y.magnitude() var mag = cursor.magnitude() - var old_width = dimensions.a * scale + var old_width = dimension.a * scale if (abs(width) > abs(height)) { mag = x_sign * mag * sign(width) @@ -173,8 +174,10 @@ Scenery.resize = new function(){ else { mag = y_sign * mag * sign(height) } - - obj.mx.scale = scale * (old_width + mag) / old_width + + obj.mx.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) @@ -192,7 +195,7 @@ Scenery.resize = new function(){ selected_dot = null if (! editor.permissions.resize) { return } obj.scale = obj.mx.ops.scale = obj.mx.scale - obj.set_wall() + obj.dimensions.assign(obj.naturalDimensions).mul(obj.scale) UndoStack.push({ type: 'update-scenery', @@ -200,6 +203,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/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 66e0faf..2dbae48 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -8,12 +8,34 @@ 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.set_scale( opt.scale || this.media.scale || 1.0 ) + this.position = new vec2(0,0) + }, - if (opt.wall) { - this.set_wall(opt.wall) + set_wall: function(opt){ + this.wall = opt.wall || this.wall + if (! this.wall) return + 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 () { + if (! this.bounds) return + 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) }, bind: function(){ @@ -41,6 +63,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 @@ -60,34 +83,14 @@ Scenery.types.base = Fiber.extend(function(base){ } }, - set_wall: function(wall){ - 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, - room_id: this.wall.room_id, - wall_id: this.wall.id, - side: this.wall.side, + 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 diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index 99c1810..d2fa3ab 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -4,13 +4,26 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ var exports = { init: function(opt){ + + opt.scale = opt.scale || (opt.data && opt.data.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() - this.recenter() + + 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) + this.bounds && 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 a8df875..e8bc7f7 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -4,13 +4,19 @@ 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() - this.recenter() + + if (opt.data) { + this.deserialize(opt.data) + } + else { + this.recenter() + } }, build: function(){ 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/rect.js b/public/assets/javascripts/rectangles/models/rect.js index 3f94740..a08176a 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -42,6 +42,7 @@ Rect.prototype.assign = function(r) { this.x.assign(r.x) this.y.assign(r.y) + return this } Rect.prototype.center = function(){ return new vec2(this.x.midpoint(), this.y.midpoint()) @@ -95,6 +96,9 @@ Rect.prototype.contains = function(x,y){ return this.x.contains(x) && this.y.contains(y) } + Rect.prototype.contains_point = function(p){ + return this.x.contains(p.x) && this.y.contains(p.y) + } Rect.prototype.containsDisc = function(x,y,r){ return this.x.containsDisc(x,r) && this.y.containsDisc(y,r) } @@ -111,6 +115,9 @@ Rect.prototype.eq = function(r){ return this.x.eq(r.x) && this.y.eq(r.y) } + Rect.prototype.fits = function(v){ + return this.x.length() >= v.a && this.y.length() >= v.b + } Rect.prototype.zero = function(){ this.a.zero() this.b.zero() @@ -133,6 +140,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/room.js b/public/assets/javascripts/rectangles/models/room.js index aa18f6d..33a94d0 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -93,83 +93,7 @@ }) }) } - - Room.prototype.group_mx_walls = function(){ - var base = this - var side_groups = {}, walls = [] - - // group the walls by side - base.mx_walls.forEach(function(wall){ - - // ignore half-walls for now - var side = wall.side || wall.half_side - - if (side_groups[side]) { - side_groups[side].push(wall) - } - else { - side_groups[side] = [wall] - } - }) - - // sort the subgroups, and then combine mx objects under wall objects - pairs(side_groups).forEach(function(pair){ - var side = pair[0], els = pair[1] - - if (side & LEFT_RIGHT) { - els.sort(sort.compare_rect_x) - } - else if (side & FRONT_BACK) { - els.sort(sort.compare_rect_y) - } - - // wall holds state for the last wall we created/saw.. - // right now we keep walls subdivided where there are half-walls to simplify - // calculations involving placing media on walls, calculating wall boundaries, etc.. - // one consequence of this is we can't place things on the walls above "doorways". - // in the future, we should have more robust placement algorithm, which takes - // this into account, and only use one wall "object" per plane - var wall - els.forEach(function(el){ - if (el.half_side) { - wall = new_wall(el) - walls.push(wall) - wall = null - } - else if (! wall) { - wall = new_wall(el) - walls.push(wall) - } - else if (side & FRONT_BACK && wall.rect.x.b == el.rect.x.a) { - wall.rect.x.b = el.rect.x.b - wall.mx.push(el) - } - else if (side & LEFT_RIGHT && wall.rect.y.b == el.rect.y.a) { - wall.rect.y.b = el.rect.y.b - wall.mx.push(el) - } - else { - wall = new_wall(el) - walls.push(wall) - } - }) - }) - - function new_wall (el) { - return new Wall ({ - id: base.id + "_" + (el.side | el.half_side) + "_" + walls.length, - room: base.id, - side: el.side | el.half_side, - half_side: el.half_side, - rect: el.rect.clone(), - el: el, - }) - } - - return walls - } - Room.prototype.clipTo = function(r){ // for each of this rect's regions split the region if necessary var regions = this.regions diff --git a/public/assets/javascripts/rectangles/models/surface.js b/public/assets/javascripts/rectangles/models/surface.js new file mode 100644 index 0000000..53977c8 --- /dev/null +++ b/public/assets/javascripts/rectangles/models/surface.js @@ -0,0 +1,281 @@ +(function(){ + + var vec2, Rect + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + } + else { + vec2 = require('./vec2') + Rect = require('./rect') + } + + var Surface = function (face){ + this.bounds = new Rect (new vec2(0, 0), new vec2(0, 0)) + this.faces = [] + if (face) { + this.add(face) + } + } + Surface.prototype.add = function(rect){ + if (this.faces.length == 0) { + this.bounds.x.a = rect.x.a + this.bounds.x.b = rect.x.a + this.bounds.y.a = rect.y.a + this.bounds.y.b = rect.y.a + } + this.bounds.x.b += rect.width() + this.bounds.y.a = Math.min(this.bounds.y.a, rect.y.a) + this.bounds.y.b = Math.max(this.bounds.y.b, rect.y.b) + this.faces.push(rect) + } + Surface.prototype.fits_scale = function(v, scale){ + v = v.clone().mul(scale) + return this.fits(v) + } + Surface.prototype.fits = function(v){ + var faces = this.faces + var scratch + if (this.bounds.x.b < v.a || this.bounds.y.b < v.b) { + return null + } + for (var i = 0; i < faces.length; i++) { + if (faces[i].fits(v)) { + return faces[i] + } + } + scratch = new Rect (0,0,0,0) + for (var i = 0; i < faces.length; i++) { + if (faces[i].y.length() < v.b) { + continue + } + scratch.x.a = faces[i].x.a + scratch.x.b = faces[i].x.b + scratch.y.a = faces[i].y.a + scratch.y.b = faces[i].y.b + SEARCH: for (var j = i+1; j < faces.length; j++) { + if (faces[j].y.a > scratch.y.a) { + scratch.y.a = faces[j].y.a + } + if (faces[j].y.b < scratch.y.b) { + scratch.y.b = faces[j].y.b + } + if (scratch.y.b <= scratch.y.a || scratch.y.length() < v.b) { + break SEARCH + } + scratch.x.b = faces[j].x.b + if (scratch.fits(v)) { + return scratch + } + } + } + return null + } + + function center_for (dimension, position, delta) { + var center = new vec2( position.a + dimension.a/2, position.b + dimension.b/2 ) + if (delta) { + center.a += delta.a + center.b += delta.b + } + return center + } + + Surface.prototype.clamp_delta = function (bounds, dimension, position, delta) { + var left_edge = position.a + delta.a - bounds.x.a + if (left_edge < 0) { + delta.a -= left_edge + } + + var right_edge = position.a + dimension.a + delta.a - bounds.x.b + if (right_edge > 0) { + delta.a -= right_edge + } + var bottom_edge = position.b + delta.b - bounds.y.a + if (bottom_edge < 0) { + delta.b -= bottom_edge + } + + var top_edge = position.b + dimension.b + delta.b - bounds.y.b + if (top_edge > 0) { + delta.b -= top_edge + } + + return delta + } + + Surface.prototype.translate = function (old_bounds, dimension, position, delta) { + this.clamp_delta( this.bounds, dimension, position, delta ) + + var new_delta = delta.clone() + if (this.clamp_delta(old_bounds, dimension, position, new_delta).eq(delta)) { + return old_bounds + } + +// var left_index = this.index_for_x( position.a + 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 + delta.a, center_index ) +// var new_bounds = this.bounds_at_index_with_dimensions(center_index, dimension) +// +// this.clamp_delta(new_bounds, dimension, position, delta) +// +// return new_bounds + + var left_side = this.index_for_x( position.a + delta.a, 0 ) + var right_side = this.index_for_x( position.a + dimension.a + delta.a, left_side ) + + var bounds = this.faces[left_side].clone() + var intersection + + for (var i = Math.min(left_side+1, right_side); i <= right_side; i++) { + intersection = bounds.y.intersection(this.faces[i].y) + if (intersection.length() < dimension.b) { + bounds = null + break + } + bounds.y.assign(intersection) + bounds.x.b = this.faces[i].x.b + } + if (! bounds || bounds.width() < dimension.a || bounds.height() < dimension.b || + bounds.y.a > position.b + delta.b || bounds.y.b < position.b + dimension.b + delta.b) { + bounds = old_bounds + } + + this.clamp_delta(bounds, dimension, position, delta) + return bounds + } + + Surface.prototype.index_for_x = function(x, min_i){ + min_i = min_i || 0 + for (var i = min_i; i < this.faces.length; i++) { + if (this.faces[i].x.contains(x)) { + return i + } + } + return -1 + } + + Surface.prototype.bounds_at_index_with_dimensions = function(index, dimensions){ + var faces = this.faces + if (index == -1) index = this.faces.length-1 + + var bounds, intersection + var width = dimensions.a + var height = dimensions.b + + for (var i = index; i >= 0; i--) { + var face = faces[i] + if (face.y.length() < height) { + if (bounds) break + else continue + } + if (! bounds) { + bounds = face.clone() + bounds.last = i + } + else if (bounds.width() < width) { + intersection = bounds.y.intersection(face.y) + if (intersection.length() < height) { + // not totally sure if we can clobber the bounds here since this would prevent + // us from looking rightwise later + break + } + else { + bounds.y.a = intersection.a + bounds.y.b = intersection.b + bounds.x.a = face.x.a + bounds.first = i + continue + } + } + else { + if (face.y.a > bounds.y.a) break + if (face.y.b < bounds.y.b) break + } + bounds.x.a = face.x.a + bounds.first = i + } + + for (var i = bounds ? bounds.last+1 : index+1; i < faces.length; i++) { + var face = faces[i] + if (face.y.length() < height) { + if (bounds) break + else continue + } + if (! bounds) { + bounds = face.clone() + bounds.first = i + } + else if (bounds.width() < width) { + intersection = bounds.y.intersection(face.y) + if (intersection.length() < height) { + // here, since the element is tall enough, we can clobber the bounds completely + bounds.y.a = face.y.a + bounds.y.b = face.y.b + bounds.x.a = face.x.a + bounds.x.b = face.x.b + bounds.first = bounds.last = i + continue + } + else { + bounds.y.a = intersection.a + bounds.y.b = intersection.b + bounds.x.b = face.x.b + bounds.last = i + continue + } + } + if (face.y.a > bounds.y.a) break + if (face.y.b < bounds.y.b) break + bounds.x.b = face.x.b + bounds.last = i + } + + if (! bounds) { + // console.log('no bounds') + return false + } + else if (bounds.width() < width) { + // console.log('too narrow') + return false + } + return bounds + } + + Surface.prototype.bounds_at_index = function(index){ + var faces = this.faces + if (index == -1) index = this.faces.length-1 + + var bounds = faces[index].clone() + var height = faces[index].height() + bounds.first = bounds.last = index + + for (var i = index-1; i >= 0; i--) { + var face = faces[i] + if (face.y.length() < height) break + if (face.y.a > bounds.y.a) break + if (face.y.b < bounds.y.b) break + + bounds.x.a = face.x.a + bounds.first = i + } + + for (var i = index+1; i < faces.length; i++) { + var face = faces[i] + if (face.y.length() < height) break + if (face.y.a > bounds.y.a) break + if (face.y.b < bounds.y.b) break + + bounds.x.b = face.x.b + bounds.last = i + } + return bounds + } + + if ('window' in this) { + window.Surface = Surface + } + else { + module.exports = Surface + } +})() diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 214feb9..0040435 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -20,6 +20,7 @@ vec2.prototype.assign = function(v){ this.a = v.a this.b = v.b + return this } vec2.prototype.abs = function(){ if (this.b < this.a) { @@ -123,12 +124,12 @@ } vec2.prototype.union = function(v){ if (this.intersects(v)) { - return new vec2( min(this.a,v.a), max(this.b, v.b) ) + return new vec2( Math.min(this.a,v.a), Math.max(this.b, v.b) ) } } vec2.prototype.intersection = function(v){ if (this.intersects(v)) { - return new vec2( max(this.a,v.a), min(this.b, v.b) ) + return new vec2( Math.max(this.a,v.a), Math.min(this.b, v.b) ) } } diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 6e2c728..8723c3c 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -1,21 +1,28 @@ -window.Wall = (function(){ +(function(){ + var vec2, Rect, sort + if ('window' in this) { + vec2 = window.vec2 + Rect = window.Rect + sort = window.sort + } + else { + vec2 = require('./vec2') + Rect = require('./rect') + UidGenerator = require('../util/uid') + } + var Wall = function(opt){ this.id = opt.id - this.uid = Uid() - this.room = opt.room - this.rect = opt.rect || new Rect (0,0,0,0) - this.rect.sides = opt.side + this.vec = opt.vec + this.edge = opt.edge this.side = opt.side - this.mx = [] - this.els = [] - if (opt.el) { - this.mx.push(opt.el) - } + this.surface = opt.surface + this.mx = opt.mx } Wall.prototype.toString = function(){ - return this.rect.toString() + return this.vec.toString() } Wall.prototype.reset = function(){ @@ -25,42 +32,118 @@ window.Wall = (function(){ this.mx.forEach(function(mx){ mx.destroy && mx.destroy() }) - this.room = this.rect = this.mx = this.els = null + this.room = this.vec = this.mx = null } Wall.prototype.bind = function(){ var base = this base.$walls = $( this.mx.map(function(mx){ return mx.el }) ) - base.$walls.bind({ - mouseover: function(){ - }, - mouseenter: function(e){ - Scenery.mouse.mouseenter(e, base) - }, - mousemove: function(e){ - }, - mousedown: function(){ - // base.randomize_colors() - // console.log(sidesToString(base.side)) - if (Scenery.nextMedia) { - var scenery = Scenery.addNextToWall(base) - - UndoStack.push({ - type: 'create-scenery', - undo: { id: scenery.id }, - redo: scenery.serialize(), + + this.mx.forEach(function(mx, index){ + $(mx.el).bind({ + mouseover: function(){ + }, + mouseenter: function(e){ + Scenery.mouse.mouseenter(e, { + wall: base, + index: index, }) + }, + mousemove: function(e){ + }, + mousedown: function(e){ + if (Scenery.nextMedia) { + var scenery = Scenery.addNextToWall({ + wall: base, + index: index + }) + + // scenery was not placed + if (! scenery) { + e.stopPropagation() + return + } + + UndoStack.push({ + type: 'create-scenery', + 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() + } + else { + app.controller.hideExtras() + } } - else if (Scenery.nextWallpaper) { - base.wallpaper() - } - else { - app.controller.hideExtras() - } - } + }) }) this.outline() } + + + // wall + // 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 & LEFT_RIGHT + // var useA = side & (FRONT | LEFT) + // 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 = position.a + dimension.a / 2 + z = this.edge + painting_distance_from_wall + break + case BACK: + x = position.a + dimension.a / 2 + z = this.edge - painting_distance_from_wall + break + case LEFT: + x = this.edge + painting_distance_from_wall + z = position.a + dimension.a / 2 + break + case RIGHT: + x = this.edge - painting_distance_from_wall + z = position.a + dimension.a / 2 + break + } + return { + x: x, + y: position.b + dimension.b / 2, + z: z, + rotationY: wall_rotation[ this.side ], + } + } + Wall.prototype.mxToPosition = function(mx, dimension) { + var position = new vec2(0,0) + switch (this.side) { + case FRONT: + case BACK: + position.a = mx.x + position.b = mx.y + break + case LEFT: + case RIGHT: + position.a = mx.z + position.b = mx.y + break + } + if (dimension) { + position.a -= dimension.a / 2 + position.b -= dimension.b / 2 + } +// if (mx.width) { position.a -= mx.width / 2 } +// if (mx.height) { position.b -= mx.height / 2 } + return position + } Wall.prototype.bounds_for = function(img, scale) { scale = scale || 1 @@ -84,37 +167,25 @@ window.Wall = (function(){ Wall.prototype.center = function(offset){ - offset = offset || 0 - - var major_axis, minor_axis - if (this.side & FRONT_BACK) { - major_axis = this.rect.x - minor_axis = this.rect.y - } - else { - major_axis = this.rect.y - minor_axis = this.rect.x - } - switch (this.side) { case FRONT: - x = major_axis.midpoint() - z = minor_axis.a + painting_distance_from_wall + offset + x = this.vec.midpoint() + z = this.edge + painting_distance_from_wall break case BACK: - x = major_axis.midpoint() - z = minor_axis.b - painting_distance_from_wall + offset + x = this.vec.midpoint() + z = this.edge - painting_distance_from_wall break case LEFT: - x = minor_axis.a + painting_distance_from_wall + offset - z = major_axis.midpoint() + x = this.edge + painting_distance_from_wall + z = this.vec.midpoint() break case RIGHT: - x = minor_axis.b - painting_distance_from_wall + offset - z = major_axis.midpoint() + x = this.edge - painting_distance_from_wall + z = this.vec.midpoint() break } - + return new vec2 (x, z) } @@ -125,88 +196,71 @@ window.Wall = (function(){ Wall.prototype.wallpaper = function(){ var useX = this.side & FRONT_BACK var shouldFlip = this.side & (LEFT | BACK) - this.siblings().forEach(function(w){ - w.mx.forEach(function(mx){ - - var partitionOffset = useX ? mx.x : mx.z - if (shouldFlip) partitionOffset *= -1 - partitionOffset += mx.width/2 - var floorOffset = mx.y + mx.height/2 + this.mx.forEach(function(mx){ + var partitionOffset = useX ? mx.x : mx.z + if (shouldFlip) partitionOffset *= -1 + partitionOffset += mx.width/2 + var floorOffset = mx.y + mx.height/2 - mx.el.style.backgroundImage = Scenery.nextWallpaper - mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px" - }) - }) + mx.el.style.backgroundImage = Scenery.nextWallpaper + mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px" + }) } Wall.prototype.outline = function(){ - var canvas = document.createElement("canvas") - var ctx = canvas.getContext('2d') var useX = this.side & FRONT_BACK var shouldFlip = this.side & (LEFT | BACK) + var mx = this.mx - var sortedWalls = this.siblings().reduce(function(a,w){ - return a.concat(w.mx) - }, []).sort( useX ? sort.compare_x : sort.compare_z ) - - if (shouldFlip) { - sortedWalls = sortedWalls.reverse() + if (! shouldFlip) { + mx = mx.reverse() } - var len = sortedWalls.length + var len = this.mx.length + var backgroundColor = "rgba(255,255,255,0.95)" + var borderColor = "rgba(0,0,0,1.0)" + zz = window.zz || 0 - sortedWalls.forEach(function(mx, i){ + mx.forEach(function(mx, i){ if (mx.outlined) return mx.outlined = true - canvas.width = mx.width - canvas.height = mx.height - ctx.fillStyle = "rgba(255,255,255,0.9)" - ctx.fillRect(0, 0, canvas.width, canvas.height) - ctx.fillStyle = "rgba(0,0,0,1.0)" + mx.el.style.backgroundColor = backgroundColor - // all walls except top-half walls get bottom lines - ctx.fillRect(0, 0, canvas.width, 1) + // all walls get bottom lines + mx.el.style.borderBottom = "1px solid " + borderColor - // all walls except bottom-half walls get top lines - ctx.fillRect(0, canvas.height-1, canvas.width, 1) + // all walls get top lines + mx.el.style.borderTop = "1px solid " + borderColor // walls on initial sides get left lines // if their left edge lines up with the rect edge if (i == 0) { - ctx.fillRect(0, 0, 1, canvas.height) + mx.el.style.borderLeft = "1px solid " + borderColor } // walls on terminal sides get right lines.... // if their right edge lines up with the rect edge if (i == len-1) { - // ctx.fillStyle = "rgba(255,0,0,1.0)" - ctx.fillRect(canvas.width-1, 0, 1, canvas.height) + mx.el.style.borderRight = "1px solid " + borderColor } - var dataUrl = canvas.toDataURL() - - mx.el.style.backgroundImage = "url(" + dataUrl + ")" }) - window.zz += 1 } Wall.prototype.siblings = function(){ - var base = this - var match = base.side | base.half_side - var walls = Rooms.list[this.room].walls.filter(function(w){ - return (w.side | w.half_side) & match && w.$walls - }) - return walls + return this +// var base = this +// var match = base.side | base.half_side +// var walls = Rooms.list[this.room].walls.filter(function(w){ +// return (w.side | w.half_side) & match && w.$walls +// }) +// return walls } Wall.prototype.randomize_colors = function(){ var color = window.grayColors[ this.side | this.half_side ] - var siblings = this.siblings() - siblings.forEach(function(w, i){ - if (! w.$walls) return - w.color(color) - }) + // this.color(color) } Wall.prototype.stroke_colors = function(){ @@ -226,6 +280,12 @@ window.Wall = (function(){ }) } - return Wall + if ('window' in this) { + window.Wall = Wall + } + else { + module.exports = Wall + } + })() 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/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js new file mode 100644 index 0000000..039a053 --- /dev/null +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -0,0 +1,64 @@ +(function(){ + + var Monitor = function () { + var base = this + base.$el = $("#minotaur") + base.timeout = null + base.delay = 500 + base.objects = {} + + base.init = function () { + 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.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 + } + + base.save = function () { + var saving = false + base.clear() + + for (var type in base.objects) { + for (var id in base.objects[type]) { + var obj = base.objects[type][id] + if (obj) { + obj.save(null, function(){ base.hide() }, function(){}) + } + delete base.objects[type][id] + saving = true + } + } + + saving ? base.show() : base.hide() + } + + base.show = function () { + base.$el.removeClass().addClass('saving') + } + + base.hide = function () { + base.$el.removeClass() + } + + base.init(); + } + + window.Minotaur = new Monitor (); + +})() diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index 06958af..34d3f5e 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) }, @@ -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 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 } |