Merge branch 'master' of github.com:okfocus/vvalls

9 files changed, 101 insertions, 40 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 3e185d2..6c27ff1 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -10,7 +10,7 @@ Map.Draw = function(map, opt){
 	draw.animate = function(){
 		ctx.save()
 		draw.clear()
-		// draw.ruler()
+		draw.fill("rgba(255,255,255,0.98)")
 
 		if (opt.minimap) {
 			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
@@ -19,7 +19,7 @@ Map.Draw = function(map, opt){
 			ctx.scale( -1, 1 )
 
 			draw.coords()
-			draw.regions(Rooms.regions, [ "#fff" ])
+			draw.regions(Rooms.regions, [ "#fff" ], "#000")
 			draw.camera(scene.camera)
 		}
 		
@@ -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, [ "#f8f8f8" ])
+			draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000")
 			draw.mouse(map.ui.mouse.cursor)
 			draw.coords()
 			scene && draw.camera(scene.camera)
@@ -38,46 +38,72 @@ Map.Draw = function(map, opt){
 		ctx.restore()
 	}
 
+  // changes the ctx temporarily
 	draw.render = function(){
-		ctx.save()
+		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 = 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"])
-		draw.mouse(map.ui.mouse.cursor)
-		scene && draw.camera(scene.camera)
-
+		draw.regions(Rooms.regions, ["#fff"], null)
+		
 		ctx.restore()
+		
+		// invert opacity
+		var pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+		var pixels = pixelData.data
+		for (var i = 0, k, _len = pixels.length; i < _len; i++) {
+		  k = i*4
+		  if (pixels[k+3] == 0) {
+		    pixels[k] = pixels[k+1] = pixels[k+2] = pixels[k+3] = 255
+		  }
+		  else {
+		    pixels[k] = pixels[k+1] = pixels[k+2] = 255
+		    pixels[k+3] = 0
+		  }
+		}
+		ctx.putImageData(pixelData, 0, 0)
+
+		// reset the ctx
+		ctx = map.canvas.getContext("2d")
+
+		return canvas
 	}
 
 	draw.clear = function(){
-		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)
 	}
 
-	draw.ruler = function (){
-		ctx.strokeStyle = "rgba(80,80,80,0.5)"
-		ctx.lineWidth = 1
-		var len = 5
-		for (var i = 0.5; i < map.dimensions.a; i += 10) {
-			line(i, 0, i, len)
-			line(0, i, len, i)
-		}
+	draw.fill = function(fillStyle){
+		ctx.fillStyle = fillStyle
+		ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b)
 	}
 
-	draw.regions = function(regions, colors){
+	draw.regions = function(regions, colors, stroke){
+	  if (stroke) {
+			ctx.strokeStyle = "#000"
+			ctx.lineWidth = (1 / map.zoom)
+		}
 		for (var i = 0; i < regions.length; i++) {
 			if (regions[i].dupe) continue
 			ctx.fillStyle = colors[i % colors.length]
-			ctx.strokeStyle = "#000"
-			ctx.lineWidth = (1 / map.zoom)
 			fill_region(regions[i])
-			stroke_sides(regions[i])
+      if (stroke) {
+        stroke_sides(regions[i])
+      }
 		}
 	}
 
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/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index 5ff53fe..71ddde9 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -103,6 +103,10 @@
 			walls_data.forEach(function(wall_data){
 			  if (! wall_data) { return }
 			  var wall = base.lookup[ wall_data.id ]
+			  if (! wall) {
+			    console.log(wall_data);
+			    return
+			  }
 			  wall.deserialize( wall_data )
 			})
     },
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/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 8174de7..fcb2f5e 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -13,7 +13,7 @@
 	}
 	
 	var Wall = function(opt){
-		this.id = [ opt.side, opt.edge, opt.vec.a ].join("_")
+		this.id = [ opt.side|0, opt.edge|0, opt.vec.a|0 ].join("_")
 		this.vec = opt.vec
 		this.edge = opt.edge
 		this.side = opt.side
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 94eed29..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(){
-		map.draw.render()
+		var thumbnail = map.draw.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
       },
     })
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 29e23c8..60c66f8 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -623,16 +623,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;
 }
 
@@ -644,17 +644,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 {