From 1f66850f5ec5a2e664ee8eaafbe25c46dad34102 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 12:11:18 -0400 Subject: generate masks for thumbnails --- public/assets/javascripts/ui/builder/BuilderSettings.js | 4 ++-- public/assets/javascripts/ui/editor/EditorSettings.js | 4 ++-- public/assets/javascripts/ui/editor/WallpaperPicker.js | 7 +++---- 3 files changed, 7 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/ui') diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 94eed29..99bceed 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(){ - map.draw.render() + var thumbnail = map.canvas.render() var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) @@ -115,7 +115,7 @@ var BuilderSettings = FormView.extend({ fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" ) fd.append( "rooms", JSON.stringify( Rooms.serialize() ) ) fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) - fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) ) + fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) ) return fd }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index fd251b7..0c08369 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -146,7 +146,6 @@ var EditorSettings = FormView.extend({ }, serialize: function(){ - map.draw.render() var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) @@ -160,7 +159,8 @@ var EditorSettings = FormView.extend({ fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) if (this.thumbnailIsStale()) { - fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) ) + var thumbnail = map.draw.render() + fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) ) } return fd }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 140076d..6bf2542 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -133,7 +133,7 @@ var WallpaperPicker = UploadView.extend({ wall: null, pickWall: function(wall){ - if (wall.background.src == "none") { + if (! wall.background || wall.background.src == "none") { return; } this.wall = wall @@ -148,16 +148,16 @@ var WallpaperPicker = UploadView.extend({ initializePositionCursor: function(){ var base = this - var dx = 0, dy = 0, dragging = false + var dx = 0, dy = 0, dragging = false, delta var x = 0, y = 0, s = 1 var mymouse = new mouse({ el: this.$position[0], down: function(e, cursor){ if (! base.wall) return + dragging = true s = parseFloat( base.$scale.val() ) x = base.wall.background.x y = base.wall.background.y - dragging = true }, drag: function(e, cursor){ if (! dragging) return @@ -172,7 +172,6 @@ var WallpaperPicker = UploadView.extend({ }) }, up: function(e, cursor, new_cursor){ - delta.zero() dragging = false }, }) -- cgit v1.2.3-70-g09d2 From 6f4cd32fa13efe3b0e8b26183589f66889dd3738 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 13:26:08 -0400 Subject: render thumbnails as masks --- .../javascripts/rectangles/engine/map/draw.js | 20 ++++++++++++------- .../javascripts/rectangles/engine/rooms/_rooms.js | 10 ++++++++++ .../assets/javascripts/rectangles/models/rect.js | 23 ++++++++++++++++++++++ .../javascripts/ui/builder/BuilderSettings.js | 2 +- public/assets/stylesheets/app.css | 11 +++++------ 5 files changed, 52 insertions(+), 14 deletions(-) (limited to 'public/assets/javascripts/ui') 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 { -- cgit v1.2.3-70-g09d2