diff options
Diffstat (limited to 'public/assets/javascripts/rectangles')
3 files changed, 92 insertions, 50 deletions
diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index b4a38f8..5d36b4f 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -29,11 +29,11 @@ var Scenery = new function(){ return scene_media } - base.addNextToWall = function(wall, mx){ + base.addNextToWall = function(wall, index){ base.add({ wall: wall, media: base.nextMedia, - mx: mx + index: index || 0, }) base.nextMedia = null return media diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 6bd5863..70d1d26 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -10,9 +10,17 @@ Scenery.types.base = Fiber.extend(function(base){ this.media = opt.media this.dimensions = new vec2(this.media.width, this.media.height) this.scale = this.media.scale + + this.scaleDimensions = this.dimensions.clone().mul(this.media.scale) + 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, opt.mx) + this.set_wall(opt.wall, index) } }, @@ -60,7 +68,7 @@ Scenery.types.base = Fiber.extend(function(base){ } }, - set_wall: function(wall, mx){ + 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() @@ -83,8 +91,8 @@ Scenery.types.base = Fiber.extend(function(base){ serialize: function(){ var data = { id: this.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), media: this.media, diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 460963b..3afe49a 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -39,7 +39,7 @@ var base = this base.$walls = $( this.mx.map(function(mx){ return mx.el }) ) - this.mx.forEach(function(mx){ + this.mx.forEach(function(mx, index){ $(mx.el).bind({ mouseover: function(){ }, @@ -52,7 +52,7 @@ // base.randomize_colors() // console.log(sidesToString(base.side)) if (Scenery.nextMedia) { - var scenery = Scenery.addNextToWall(base) + var scenery = Scenery.addNextToWall(base, index) UndoStack.push({ type: 'create-scenery', @@ -74,6 +74,64 @@ }) 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 & FRONT_BACK + // var useA = side & (FRONT | LEFT) + // mx.rect[useX ? 'y': 'x'][ useA ? 'a': 'b'] + // surface: an ordered set of contiguous wall regions + + Wall.prototype.positionToMx = function(position, dimension) { + switch (this.side) { + case FRONT: + x = this.vec.a + position.a + dimension.a / 2 + z = this.edge + painting_distance_from_wall + break + case BACK: + x = this.vec.a + 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 + break + case RIGHT: + x = this.edge - painting_distance_from_wall + z = this.vec.a + position.a + dimension.a / 2 + break + } + return { + x: x, + y: position.b + dimension.b / 2 + z: z, + } + } + 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.b = mx.y - mx.height / 2 + break + case BACK: + position.a = mx.x - mx.width / 2 - this.vec.a + position.b = mx.y - mx.height / 2 + break + case LEFT: + position.a = mx.z - mx.width / 2 - this.vec.a + position.b = mx.y - mx.height / 2 + break + case RIGHT: + position.a = mx.z - mx.width / 2 - this.vec.a + position.b = mx.y - mx.height / 2 + break + } + return position + } Wall.prototype.bounds_for = function(img, scale) { scale = scale || 1 @@ -85,12 +143,6 @@ new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) ) } - Wall.prototype.bounds_for_mx = function(img, scale, mx) { - // - } - Wall.prototype.fits_mx = function(img, scale, mx) { - } - Wall.prototype.fits = function(img, scale){ if (this.side & FRONT_BACK && this.rect.x.length() < img.width * scale) { return false @@ -103,37 +155,25 @@ 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) } @@ -156,8 +196,6 @@ } 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 @@ -169,37 +207,33 @@ 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 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.95)" - ctx.fillRect(0, 0, canvas.width, canvas.height) - ctx.fillStyle = "rgba(0,0,0,1.0)" + mx.el.style.backgroundColor = backgroundColor // all walls get bottom lines - ctx.fillRect(0, 0, canvas.width, 1) + mx.el.style.borderBottom = "1px solid " + borderColor // all walls get top lines - ctx.fillRect(0, canvas.height-1, canvas.width, 1) + 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.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 + ")" }) } @@ -215,7 +249,7 @@ Wall.prototype.randomize_colors = function(){ var color = window.grayColors[ this.side | this.half_side ] - this.color(color) + // this.color(color) } Wall.prototype.stroke_colors = function(){ |