diff options
5 files changed, 52 insertions, 14 deletions
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 07e2d9f..6c27ff1 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -38,18 +38,24 @@ Map.Draw = function(map, opt){ ctx.restore() } + // changes the ctx temporarily draw.render = function(){ - // change the ctx temporarily + var thumbnail_side = 1000 + + var extent = Rooms.extent() + var center = extent.center() + var zoom = thumbnail_side / Math.max( extent.width(), extent.height() ) * 0.99 + var canvas = document.createElement("canvas") ctx = canvas.getContext('2d') - canvas.width = map.canvas.width - canvas.height = map.canvas.height + canvas.width = thumbnail_side + canvas.height = thumbnail_side draw.clear() - ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) - ctx.scale( map.zoom, map.zoom ) - ctx.translate( map.center.a, map.center.b ) + ctx.translate( thumbnail_side * 1/2, thumbnail_side * 1/2) + ctx.scale( zoom, zoom ) + ctx.translate( center.a, -center.b ) ctx.scale( -1, 1 ) draw.regions(Rooms.regions, ["#fff"], null) @@ -73,7 +79,7 @@ Map.Draw = function(map, opt){ // reset the ctx ctx = map.canvas.getContext("2d") - + return canvas } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 6f96275..0c3cfd4 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -118,6 +118,16 @@ return data } + base.extent = function(){ + var extent = new Rect ( new vec2(Infinity, -Infinity), new vec2(Infinity, -Infinity) ) + + base.forEach(function(room){ + extent.expand(room.rect) + }) + + return extent + } + base.sorted_by_position = function(){ return sort.rooms_by_position( base.values() ) } diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index a08176a..00f2c55 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -141,6 +141,29 @@ 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.expand = function(rect){ + this.x.a = Math.min( this.x.a, rect.x.a ) + this.x.b = Math.max( this.x.b, rect.x.b ) + this.y.a = Math.min( this.y.a, rect.y.a ) + this.y.b = Math.max( this.y.b, rect.y.b ) + return this + } + Rect.prototype.square = function(){ + var width = this.x.length() + var height = this.y.length() + var diff + if (width < height) { + diff = (height - width) / 2 + this.x.a -= diff + this.x.b += diff + } + else { + diff = (width - height) / 2 + this.y.a -= diff + this.y.b += diff + } + return this + } Rect.prototype.toString = function(){ var sides = sidesToString(this.sides) var s = "[" + this.x.toString() + " " + this.y.toString() + "] " + sides diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 99bceed..7ae6294 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -107,7 +107,7 @@ var BuilderSettings = FormView.extend({ }, serialize: function(){ - var thumbnail = map.canvas.render() + var thumbnail = map.draw.render() var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 6e23962..d47b5a7 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -619,16 +619,16 @@ iframe.embed { display: none; } -.templates span{ +.templates span { background-position: center; background-size: contain; background-repeat: no-repeat; background-color: #fff; width: 20vw; - height: 20vh; + height: 20vw; display: inline-block; margin: 4vw; - border:1px solid black; + background-color: #ddd; position: relative; } @@ -640,17 +640,16 @@ iframe.embed { left: 0; background: #fff; padding: 5px; - border-top: 1px solid black; font-weight: 300; } .templates span:hover { - border:1px solid blue; + background-color: #f00; cursor:pointer; } .templates span:hover:after { - border-top: 1px solid blue; + color: #f00; } .templates h1 { |