From 39f1a7136567ae7e0afbf085732853cc86123393 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 1 Apr 2015 19:30:22 -0400
Subject: stub in 3d object ui

---
 .../rectangles/engine/sculpture/_sculpture.js      | 94 +++++++++++++++++++++
 .../rectangles/engine/sculpture/types/image.js     | 98 ++++++++++++++++++++++
 2 files changed, 192 insertions(+)
 create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
 create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/types/image.js

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
new file mode 100644
index 0000000..eb64e92
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
@@ -0,0 +1,94 @@
+
+var Sculpture = new function(){
+	
+	var base = this;
+
+	base.list = {}
+	base.nextMedia = null
+	
+	base.mouse = new mouse ({ use_offset: false, mousedownUsesCapture: true })
+	
+	base.init = function(){
+	}
+
+	base.add = function(opt){
+		var scene_media
+		switch (opt.media.type) {
+			case 'image':
+				scene_media = new Sculpture.types.image (opt)
+				break
+		}
+		base.list[scene_media.id] = scene_media
+		return scene_media
+	}
+	
+	base.addNextToWall = function(opt){
+	  opt.newMedia = true
+		opt.media = base.nextMedia
+		opt.index = opt.index || 0
+		var scene_media = base.add(opt)
+		
+		// test if scenery was placed here
+		if (! scene_media) {
+		  return null
+		}
+		else {
+			base.nextMedia = null
+			return scene_media
+		}
+	}
+
+	base.find = function(id){
+		return base.list[id] || null
+	}
+	
+	base.remove = function(id){
+		var scene_media = base.list[id]
+		delete base.list[id]
+		scene_media && scene_media.destroy()
+	}
+	
+	base.removeAll = function(){
+		base.forEach(function(scene_media){
+			base.remove(scene_media.id)
+		})
+	}
+
+	base.uid = new UidGenerator(base.list)
+	
+	base.forEach = function(f){
+		return base.values().forEach(f)
+	}
+	
+	base.map = function(f){
+		return base.values().map(f)
+	}
+	
+	base.values = function(){
+		return _.values(base.list)
+	}
+	
+	base.serialize = function(){
+		var sculptures = base.map(function(sculpture){
+			return sculpture.serialize()
+		})
+		return sculptures
+	}
+
+	base.deserialize = function(sculpture_data){
+	  var added = []
+		sculpture_data.forEach(function(data){
+			var scene_media = base.add({
+				id: data.id,
+			  data: data,
+				media: data.media,
+			})
+			added.push(scene_media)
+		})
+		return added
+	}
+
+	return base
+}
+
+Sculpture.types = {}
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
new file mode 100644
index 0000000..af538f7
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
@@ -0,0 +1,98 @@
+Scenery.types.base = Fiber.extend(function(base){
+
+	var exports = {
+
+		init: function(opt){
+			_.bindAll(this, 'enter', 'leave')
+
+			this.id = opt.id || Scenery.uid("scenery")
+			this.move = new Scenery.move (this)
+			this.media = opt.media
+			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)
+		},
+
+		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)
+		},
+		
+		bind: function(){
+			this.move.bind()
+// 			$(this.mx.el).bind({
+// 				mouseenter: this.enter,
+// 				mouseleave: this.leave,
+// 			})
+		},
+	
+		unbind: function(){
+			this.move.unbind()
+// 			$(this.mx.el).unbind({
+// 				mouseenter: this.enter,
+// 				mouseleave: this.leave,
+// 			})
+		},
+		
+		remove: function(){
+		  if (this.removed) return
+		  this.removed = true
+		  
+      UndoStack.push({
+        type: 'destroy-sculpture',
+        undo: this.serialize(),
+        redo: { id: this.id },
+      })
+
+      // TODO: watch individual scenery object here
+      Minotaur.watch( app.router.editorView.settings )
+
+			Scenery.remove(this.id)
+
+      Scenery.resize.hide()
+      if (app.controller.mediaEditor) {
+        app.controller.mediaEditor.tainted = false
+        app.controller.mediaEditor.hide()
+      }
+      if (app.controller.textEditor) {
+        app.controller.textEditor.tainted = false
+        app.controller.textEditor.hide()
+      }
+		},
+
+		destroy: function(){
+			this.unbind()
+			scene.remove(this.mx)
+			this.mx.media = null
+			this.mx.ops = null
+			this.mx = null
+			this.move = null
+			this.media = null
+			this.dimensions = null
+			this.naturalDimensions = null
+			this.wall = null
+			this.bounds = null
+			this.center = null
+		},
+
+		serialize: function(){
+			var data = {
+				id: this.id,
+				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
+		},
+	}
+	
+	return exports
+
+})
-- 
cgit v1.2.3-70-g09d2


From c6eea0f4887ba14e5a6ecfff8c9e8480ae6421c1 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 2 Apr 2015 17:05:31 -0400
Subject: placing objects on the floor

---
 .../rectangles/engine/sculpture/_sculpture.js      |  24 +++--
 .../rectangles/engine/sculpture/types/_object.js   |  91 +++++++++++++++++
 .../rectangles/engine/sculpture/types/image.js     | 110 ++++++---------------
 .../assets/javascripts/rectangles/models/floor.js  |   7 +-
 .../assets/javascripts/rectangles/models/vec3.js   |   9 ++
 .../assets/javascripts/ui/editor/EditorSettings.js |   3 +
 server/lib/schemas/Project.js                      |   1 +
 views/partials/scripts.ejs                         |   1 +
 8 files changed, 149 insertions(+), 97 deletions(-)
 create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/types/_object.js

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
index eb64e92..c8c90d3 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
@@ -4,7 +4,6 @@ var Sculpture = new function(){
 	var base = this;
 
 	base.list = {}
-	base.nextMedia = null
 	
 	base.mouse = new mouse ({ use_offset: false, mousedownUsesCapture: true })
 	
@@ -12,29 +11,28 @@ var Sculpture = new function(){
 	}
 
 	base.add = function(opt){
-		var scene_media
+		var sculpture
 		switch (opt.media.type) {
 			case 'image':
-				scene_media = new Sculpture.types.image (opt)
+				sculpture = new Sculpture.types.image (opt)
 				break
 		}
-		base.list[scene_media.id] = scene_media
-		return scene_media
+		base.list[sculpture.id] = sculpture
+		return sculpture
 	}
 	
-	base.addNextToWall = function(opt){
+	base.addNext = function(opt){
 	  opt.newMedia = true
-		opt.media = base.nextMedia
-		opt.index = opt.index || 0
-		var scene_media = base.add(opt)
+		opt.media = Scenery.nextMedia
+		var sculpture = base.add(opt)
 		
-		// test if scenery was placed here
-		if (! scene_media) {
+		// test if sculpture was placed here
+		if (! sculpture) {
 		  return null
 		}
 		else {
-			base.nextMedia = null
-			return scene_media
+			Scenery.nextMedia = null
+			return sculpture
 		}
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
new file mode 100644
index 0000000..fa6b0b1
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -0,0 +1,91 @@
+Sculpture.types.base = Fiber.extend(function(base){
+
+	var exports = {
+
+		init: function(opt){
+			this.id = opt.id || Sculpture.uid("sculpture")
+			// this.move = new Sculpture.move (this)
+			this.media = opt.media
+			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)
+		},
+
+		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)
+		},
+
+		place: function(opt){
+			if (opt.data) {
+        this.deserialize(opt.data)
+      }
+      else {
+        this.mx.move(opt.position)
+      }
+		},
+		
+		bind: function(){
+			// this.move.bind()
+		},
+	
+		unbind: function(){
+			// this.move.unbind()
+		},
+		
+		remove: function(){
+		  if (this.removed) return
+		  this.removed = true
+		  
+      UndoStack.push({
+        type: 'destroy-sculpture',
+        undo: this.serialize(),
+        redo: { id: this.id },
+      })
+
+      // TODO: watch individual scenery object here
+      Minotaur.watch( app.router.editorView.settings )
+
+			Sculpture.remove(this.id)
+
+      // Sculpture.resize.hide()
+      if (app.controller.sculptureEditor) {
+        app.controller.sculptureEditor.tainted = false
+        app.controller.sculptureEditor.hide()
+      }
+		},
+
+		destroy: function(){
+			this.unbind()
+			scene.remove(this.mx)
+			this.mx.media = null
+			this.mx.ops = null
+			this.mx = null
+			this.move = null
+			this.media = null
+			this.dimensions = null
+			this.naturalDimensions = null
+			this.wall = null
+			this.bounds = null
+			this.center = null
+		},
+
+		serialize: function(){
+			var data = {
+				id: this.id,
+				dimensions: this.dimensions.serialize(),
+				position: app.position(this.mx),
+				scale: this.scale,
+				media: this.media,
+			}
+			return data
+		},
+	}
+	
+	return exports
+
+})
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
index af538f7..ae62133 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
@@ -1,98 +1,48 @@
-Scenery.types.base = Fiber.extend(function(base){
 
-	var exports = {
+Sculpture.types.image = Sculpture.types.base.extend(function(base){
 
+	var exports = {
+	
+	  type: 'image',
+	
 		init: function(opt){
-			_.bindAll(this, 'enter', 'leave')
 
-			this.id = opt.id || Scenery.uid("scenery")
-			this.move = new Scenery.move (this)
-			this.media = opt.media
-			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)
-		},
+			opt.scale = opt.scale || (opt.data && opt.data.scale) || DEFAULT_PICTURE_WIDTH / max(DEFAULT_PICTURE_WIDTH, opt.media.width)
 
-		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)
-		},
-		
-		bind: function(){
-			this.move.bind()
-// 			$(this.mx.el).bind({
-// 				mouseenter: this.enter,
-// 				mouseleave: this.leave,
-// 			})
-		},
-	
-		unbind: function(){
-			this.move.unbind()
-// 			$(this.mx.el).unbind({
-// 				mouseenter: this.enter,
-// 				mouseleave: this.leave,
-// 			})
-		},
-		
-		remove: function(){
-		  if (this.removed) return
-		  this.removed = true
-		  
-      UndoStack.push({
-        type: 'destroy-sculpture',
-        undo: this.serialize(),
-        redo: { id: this.id },
-      })
+			base.init.call(this, opt)
 
-      // TODO: watch individual scenery object here
-      Minotaur.watch( app.router.editorView.settings )
+			this.build(opt)
+			this.bind()
+			this.place(opt)
+		},
 
-			Scenery.remove(this.id)
+		build: function(opt){
+		  this.footprint = new MX.Object3D()
+			this.mx = new MX.Image({
+				src: this.media.url,
+				scale: this.scale,
+				media: this.media,
+				backface: true,
+			})
 
-      Scenery.resize.hide()
-      if (app.controller.mediaEditor) {
-        app.controller.mediaEditor.tainted = false
-        app.controller.mediaEditor.hide()
-      }
-      if (app.controller.textEditor) {
-        app.controller.textEditor.tainted = false
-        app.controller.textEditor.hide()
-      }
-		},
+			opt.position.y = opt.position.y || this.scale * this.media.height/2,
+      opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY,
 
-		destroy: function(){
-			this.unbind()
-			scene.remove(this.mx)
-			this.mx.media = null
-			this.mx.ops = null
-			this.mx = null
-			this.move = null
-			this.media = null
-			this.dimensions = null
-			this.naturalDimensions = null
-			this.wall = null
-			this.bounds = null
-			this.center = null
+			scene.add( this.mx )
 		},
 
 		serialize: function(){
-			var data = {
-				id: this.id,
-				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,
-			}
+			var data = base.serialize.call(this)
 			return data
 		},
+	
+		deserialize: function(data){
+			this.mx.move(data.position)
+			this.mx.ops.width = data.dimensions.a
+			this.mx.ops.height = data.dimensions.b
+      this.dimensions.deserialize(data.dimensions)
+		},
 	}
 	
 	return exports
-
 })
diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js
index 7b020a9..530de2b 100644
--- a/public/assets/javascripts/rectangles/models/floor.js
+++ b/public/assets/javascripts/rectangles/models/floor.js
@@ -79,9 +79,8 @@
           if (Scenery.nextMedia) {
             e.preventDefault()
           
-            var sculpture = Sculpture.addNextToWall({
-              index: index,
-              position: pos,
+            var sculpture = Sculpture.addNext({
+              position: { x: x, y: 0, z: z },
             })
           
             // scenery was not placed
@@ -91,7 +90,7 @@
             }
 
             app.controller.toolbar.resetPermissions()
-            Sculpture.resize.show(sculpture)
+            // Sculpture.resize.show(sculpture)
             Sculpture.hovering = true 
           
             // app.controller.pick(sculpture)
diff --git a/public/assets/javascripts/rectangles/models/vec3.js b/public/assets/javascripts/rectangles/models/vec3.js
index c44dfe6..97329ed 100644
--- a/public/assets/javascripts/rectangles/models/vec3.js
+++ b/public/assets/javascripts/rectangles/models/vec3.js
@@ -32,3 +32,12 @@ vec3.prototype.apply_projection = function (m) {
 
 	return this;
 }
+
+vec3.prototype.serialize = function(){
+  return [ round(this.a), round(this.b), round(this.c) ]
+}
+vec3.prototype.deserialize = function(data){
+  this.a = data[0]
+  this.b = data[1]
+  this.c = data[2]
+}
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index b319404..460863e 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -77,6 +77,7 @@ var EditorSettings = FormView.extend({
 			data.privacy && this.$privacy.find("[value=" + data.privacy + "]").prop("checked", "checked")
 			
 			data.media && Scenery.deserialize(data.media)
+			data.sculpture && Sculpture.deserialize(data.sculpture)
 		}
 	},
 	
@@ -112,6 +113,7 @@ var EditorSettings = FormView.extend({
 	clear: function(e){
 		e.preventDefault()
 		Scenery.removeAll()
+		Sculpture.removeAll()
 	},
 	
 	destroy: function(){
@@ -191,6 +193,7 @@ var EditorSettings = FormView.extend({
  		fd.append( "walls", JSON.stringify( Walls.serialize() ) )
  		fd.append( "colors", JSON.stringify( Walls.colors ) )
 		fd.append( "media", JSON.stringify( Scenery.serialize() ) )
+		fd.append( "sculpture", JSON.stringify( Sculpture.serialize() ) )
 		fd.append( "startPosition", JSON.stringify( this.startPosition || false ) )
 		fd.append( "lastPosition", JSON.stringify( app.position(scene.camera) ) )
 		
diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js
index a923d85..e9501fc 100644
--- a/server/lib/schemas/Project.js
+++ b/server/lib/schemas/Project.js
@@ -30,6 +30,7 @@ var ProjectSchema = new mongoose.Schema({
 	rooms: [mongoose.Schema.Types.Mixed],
 	walls: [mongoose.Schema.Types.Mixed],
 	media: [mongoose.Schema.Types.Mixed],
+	sculpture: [mongoose.Schema.Types.Mixed],
 	colors: mongoose.Schema.Types.Mixed,
 	startPosition: mongoose.Schema.Types.Mixed,
 	lastPosition: mongoose.Schema.Types.Mixed,
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 6cc5315..ca6cc94 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -74,6 +74,7 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/video.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/_sculpture.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/_object.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/image.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 3986bd98b0c0a4674310aa6425c75dba5962f2c7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 3 Apr 2015 16:23:51 -0400
Subject: persist sculpture to db

---
 .../assets/javascripts/rectangles/engine/sculpture/types/image.js | 8 +++++---
 server/lib/api/projects.js                                        | 4 +++-
 2 files changed, 8 insertions(+), 4 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
index ae62133..914abdf 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
@@ -25,9 +25,11 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){
 				backface: true,
 			})
 
-			opt.position.y = opt.position.y || this.scale * this.media.height/2,
-      opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY,
-
+      if (opt.position) {
+        opt.position.y = opt.position.y || this.scale * this.media.height/2 + 5
+        opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY
+      }
+      
 			scene.add( this.mx )
 		},
 
diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js
index 1bf046f..3810168 100644
--- a/server/lib/api/projects.js
+++ b/server/lib/api/projects.js
@@ -40,6 +40,7 @@ var projects = {
 		data.rooms = JSON.parse(data.rooms)
 		data.walls = JSON.parse(data.walls)
 		data.media = JSON.parse(data.media)
+		data.sculpture = JSON.parse(data.sculpture)
 		data.colors = JSON.parse(data.colors)
 		data.startPosition = JSON.parse(data.startPosition)
 		data.lastPosition = JSON.parse(data.lastPosition)
@@ -100,11 +101,12 @@ var projects = {
         data.updated_at = new Date ()
 
 				_.extend(doc, data)
-				
+
 				doc.rooms = JSON.parse(data.rooms)
 				doc.walls = JSON.parse(data.walls)
 				doc.colors = JSON.parse(data.colors)
 				doc.media = JSON.parse(data.media)
+				doc.sculpture = JSON.parse(data.sculpture)
         doc.startPosition = JSON.parse(data.startPosition)
         doc.lastPosition = JSON.parse(data.lastPosition)
 
-- 
cgit v1.2.3-70-g09d2


From 66e10f749fcc35e779e2492521b8dd98a8770820 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 3 Apr 2015 16:54:51 -0400
Subject: billboard mode

---
 public/assets/javascripts/rectangles/_env.js                     | 1 +
 .../assets/javascripts/rectangles/engine/sculpture/_sculpture.js | 9 +++++++++
 .../javascripts/rectangles/engine/sculpture/types/image.js       | 3 +++
 3 files changed, 13 insertions(+)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js
index 3221bac..14f73e3 100644
--- a/public/assets/javascripts/rectangles/_env.js
+++ b/public/assets/javascripts/rectangles/_env.js
@@ -20,6 +20,7 @@ environment.init = function(){
 	Rooms.init()
 	Walls.init()
 	Scenery.init()
+	Sculpture.init()
 	
 	scene.update()
 	environment.update()
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
index c8c90d3..1543def 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
@@ -8,6 +8,15 @@ var Sculpture = new function(){
 	base.mouse = new mouse ({ use_offset: false, mousedownUsesCapture: true })
 	
 	base.init = function(){
+	  app.on("move", base.updateBillboards)
+	}
+	
+	base.updateBillboards = function(){
+	  base.forEach(function(sculpture){
+	    if (sculpture.billboard) {
+	      sculpture.mx.rotationY = cam.rotationY
+	    }
+	  })
 	}
 
 	base.add = function(opt){
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
index 914abdf..9399097 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
@@ -28,6 +28,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){
       if (opt.position) {
         opt.position.y = opt.position.y || this.scale * this.media.height/2 + 5
         opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY
+        this.billboard = true
       }
       
 			scene.add( this.mx )
@@ -35,6 +36,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){
 
 		serialize: function(){
 			var data = base.serialize.call(this)
+			data.billboard = this.billboard
 			return data
 		},
 	
@@ -42,6 +44,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){
 			this.mx.move(data.position)
 			this.mx.ops.width = data.dimensions.a
 			this.mx.ops.height = data.dimensions.b
+			this.billboard = data.billboard
       this.dimensions.deserialize(data.dimensions)
 		},
 	}
-- 
cgit v1.2.3-70-g09d2


From 1f4d4c1034f7e3403c9671bd88e6e83d22696dcb Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 3 Apr 2015 17:30:37 -0400
Subject: backface

---
 .../assets/javascripts/rectangles/engine/sculpture/types/image.js  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
index 9399097..9e8de58 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
@@ -17,7 +17,6 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){
 		},
 
 		build: function(opt){
-		  this.footprint = new MX.Object3D()
 			this.mx = new MX.Image({
 				src: this.media.url,
 				scale: this.scale,
@@ -26,9 +25,10 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){
 			})
 
       if (opt.position) {
-        opt.position.y = opt.position.y || this.scale * this.media.height/2 + 5
+        opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3
         opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY
         this.billboard = true
+        this.backface = true
       }
       
 			scene.add( this.mx )
@@ -37,6 +37,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){
 		serialize: function(){
 			var data = base.serialize.call(this)
 			data.billboard = this.billboard
+			data.backface = this.backface
 			return data
 		},
 	
@@ -45,6 +46,8 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){
 			this.mx.ops.width = data.dimensions.a
 			this.mx.ops.height = data.dimensions.b
 			this.billboard = data.billboard
+			this.backface = data.backface
+			if (! this.backface) this.mx.el.classList.remove("backface-visible")
       this.dimensions.deserialize(data.dimensions)
 		},
 	}
-- 
cgit v1.2.3-70-g09d2


From 519ff21e00c5c48d06e1ddee0cdc1dc3d90a26f8 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 3 Apr 2015 18:40:04 -0400
Subject: pulling in move code / view code

---
 .../rectangles/engine/scenery/resize.js            |   1 +
 .../rectangles/engine/sculpture/move.js            | 158 ++++++++++++++++
 .../rectangles/engine/sculpture/types/_object.js   |  22 ++-
 .../rectangles/engine/sculpture/types/image.js     |  18 --
 public/assets/javascripts/ui/editor/EditorView.js  |  10 +-
 .../javascripts/ui/editor/SculptureEditor.js       | 200 +++++++++++++++++++++
 views/partials/scripts.ejs                         |   2 +
 7 files changed, 390 insertions(+), 21 deletions(-)
 create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/move.js
 create mode 100644 public/assets/javascripts/ui/editor/SculptureEditor.js

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js
index 73fd82a..a5e255a 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/resize.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js
@@ -49,6 +49,7 @@ Scenery.resize = new function(){
 	
 	// rotate the dots as appropriate
 	base.rotate_dots = function(){
+	console.trace()
 		rotationY = obj.wall.rotationY
 		dots.forEach(function(dot){
 			dot.rotationY = rotationY
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js
new file mode 100644
index 0000000..b5a4b40
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js
@@ -0,0 +1,158 @@
+
+Sculpture.move = function(base){
+
+	var x, y, z, position, dimension, bounds
+	var dragging = false, moved = false
+	var oldState
+
+	this.bind = function(){
+		Sculpture.mouse.bind_el(base.mx.el)
+		Sculpture.mouse.on("down", down)
+		Sculpture.mouse.on("enter", switch_wall)
+		Sculpture.mouse.on("drag", drag)
+		Sculpture.mouse.on("up", up)
+	}
+
+	this.unbind = function(){
+	  base.focused = false
+		Sculpture.mouse.unbind_el(base.mx.el)
+		Sculpture.mouse.off("down", down)
+		Sculpture.mouse.off("enter", switch_wall)
+		Sculpture.mouse.off("drag", drag)
+		Sculpture.mouse.off("up", up)
+	}
+	
+	function down (e, cursor){
+		if (e.target != base.mx.el && (e.target != base.mx.overlay)) return;
+		if (editor.permissions.destroy) {
+		  base.remove()
+			return
+		}
+
+		// load the modal
+		app.controller.pick(base)
+
+    if (! base.focused) {
+			e.clickAccepted = false
+			base.focused = true
+			return
+    }
+		if (! (editor.permissions.move || editor.permissions.resize) ) {
+			e.clickAccepted = false
+			return
+		}
+		dragging = true
+		moved = false
+		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")
+	}
+	
+	function drag (e, cursor){
+		if (! dragging) return
+		
+		moved = true
+
+		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 = position.a + delta.a * cos(base.wall.rotationY) + dimension.a / 2
+				break
+			case LEFT:
+			case RIGHT:
+				base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2
+				break
+		}
+
+		if (editor.permissions.resize) {
+			Sculpture.resize.move_dots()
+		}
+	}
+
+	function up (e, cursor){
+    if (! dragging || ! oldState) return
+        
+    if (moved) {
+      UndoStack.push({
+        type: 'update-sculpture',
+        undo: oldState,
+        redo: base.serialize(),
+      })
+
+      // TODO: watch individual sculpture object here
+      Minotaur.watch( app.router.editorView.settings )
+    }
+
+		dragging = moved = false
+    oldState = null
+		document.body.classList.remove("dragging")
+  }
+	
+	function switch_wall (e, target, cursor){
+		if (! dragging) return
+		if (target.wall.id == base.wall.id) return
+		
+		var old_wall_side = base.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)
+
+		if (! new_bounds) return
+
+		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:
+					position.a = bounds.x.a + dimension.a / 2
+					break
+				case BACK:
+					position.a = bounds.x.b - dimension.a / 2
+					break
+				case LEFT:
+					position.a = bounds.x.a + dimension.a / 2
+					break
+				case RIGHT:
+					position.a = bounds.x.b - dimension.a / 2
+					break
+			}
+		}
+
+		var mx_delta = base.wall.positionToMx( position, dimension )
+		base.mx.move(mx_delta)
+
+		if (editor.permissions.resize) {
+			Sculpture.resize.rotate_dots()
+ 			Sculpture.resize.move_dots()
+		}
+
+		cursor.x.a = cursor.x.b
+		//var delta = cursor.delta()
+		drag(e, cursor)
+
+	}
+	
+	return this
+
+}
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index fa6b0b1..6c93b41 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -8,8 +8,14 @@ Sculpture.types.base = Fiber.extend(function(base){
 			this.media = opt.media
 			this.naturalDimensions = new vec2(this.media.width, this.media.height)
 			
+			this.move = new Sculpture.move (this)
+      this.billboard = true
+      this.backface = true
+
 			this.set_scale( opt.scale || this.media.scale || 1.0 )
 			this.position = new vec2(0,0)
+			
+			this.isSculpture = true
 		},
 
 		set_scale: function(scale){
@@ -30,11 +36,11 @@ Sculpture.types.base = Fiber.extend(function(base){
 		},
 		
 		bind: function(){
-			// this.move.bind()
+			this.move.bind()
 		},
 	
 		unbind: function(){
-			// this.move.unbind()
+			this.move.unbind()
 		},
 		
 		remove: function(){
@@ -81,9 +87,21 @@ Sculpture.types.base = Fiber.extend(function(base){
 				position: app.position(this.mx),
 				scale: this.scale,
 				media: this.media,
+        billboard: this.billboard,
+        backface: this.backface,
 			}
 			return data
 		},
+		
+		deserialize: function(data){
+			this.mx.move(data.position)
+			this.mx.ops.width = data.dimensions.a
+			this.mx.ops.height = data.dimensions.b
+			this.billboard = data.billboard
+			this.backface = data.backface
+			if (! this.backface) this.mx.el.classList.remove("backface-visible")
+      this.dimensions.deserialize(data.dimensions)
+		},
 	}
 	
 	return exports
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
index 9e8de58..3e5ab08 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
@@ -27,29 +27,11 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){
       if (opt.position) {
         opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3
         opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY
-        this.billboard = true
-        this.backface = true
       }
       
 			scene.add( this.mx )
 		},
 
-		serialize: function(){
-			var data = base.serialize.call(this)
-			data.billboard = this.billboard
-			data.backface = this.backface
-			return data
-		},
-	
-		deserialize: function(data){
-			this.mx.move(data.position)
-			this.mx.ops.width = data.dimensions.a
-			this.mx.ops.height = data.dimensions.b
-			this.billboard = data.billboard
-			this.backface = data.backface
-			if (! this.backface) this.mx.el.classList.remove("backface-visible")
-      this.dimensions.deserialize(data.dimensions)
-		},
 	}
 	
 	return exports
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 50d3650..e5e2ca0 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -17,6 +17,7 @@ var EditorView = View.extend({
 		this.mediaUpload = new MediaUpload ({ parent: this })
 		this.mediaTumblr = new MediaTumblr ({ parent: this })
 		this.mediaEditor = new MediaEditor ({ parent: this })
+		this.sculptureEditor = new SculptureEditor ({ parent: this })
 		this.wallpaperPicker = new WallpaperPicker ({ parent: this })
 		this.colorControl = new ColorControl ({ parent: this })
 		this.textEditor = new TextEditor ({ parent: this })
@@ -56,12 +57,19 @@ var EditorView = View.extend({
 	},
 	
 	pick: function(scenery){
-	  if (scenery.type == "text") {
+	  if (scenery.isSculpture) {
       this.mediaEditor.hide()
+      this.textEditor.hide()
+      this.sculptureEditor.pick(scenery)
+	  }
+	  else if (scenery.type == "text") {
+      this.mediaEditor.hide()
+      this.sculptureEditor.hide()
       this.textEditor.pick(scenery)
 	  }
 	  else {
       this.textEditor.hide()
+      this.sculptureEditor.hide()
       this.mediaEditor.pick(scenery)
 	  }
 	},
diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js
new file mode 100644
index 0000000..cce000e
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/SculptureEditor.js
@@ -0,0 +1,200 @@
+
+var SculptureEditor = FormView.extend({
+	el: "#sculptureEditor",
+		
+	events: {
+		"keydown": 'taint',
+		"focus [name]": "clearMinotaur",
+		"click [data-role=play-media]": "togglePaused",
+		"mousedown [name=keyframe]": "stopPropagation",
+		"mousedown": "stopPropagation",
+		"change [name=keyframe]": "seek",
+		"change [name=autoplay]": "setAutoplay",
+		"change [name=loop]": "setLoop",
+		"change [name=mute]": "setMute",
+		"change [name=width]": 'changeWidth',
+		"change [name=height]": 'changeHeight',
+		"change [name=units]": 'changeUnits',
+		"click [data-role=destroy-media]": "destroy",
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.__super__.initialize.call(this)
+		
+		this.$name = this.$("[name=name]")
+		this.$description = this.$("[name=description]")
+
+		// image fields
+		this.$width = this.$("[name=width]")
+		this.$height = this.$("[name=height]")
+		this.$units = this.$("[name=units]")
+		
+		// video fields
+		this.$playButton = this.$("[data-role=play-media]")
+		this.$autoplay = this.$("[name=autoplay]")
+		this.$loop = this.$("[name=loop]")
+		this.$mute = this.$("[name=mute]")
+		this.$keyframe = this.$("[name=keyframe]")
+	},
+	
+	toggle: function(state) {
+    if (state) {
+      this.parent.settings.toggle()
+    }
+    this.$el.toggleClass("active", state);
+	},
+	
+	togglePaused: function(state){
+		var state = this.sculpture.toggle(state)
+		this.$playButton.toggleClass("paused", ! state)
+	},
+	
+	pick: function(sculpture) {
+		if (this.sculpture && sculpture !== this.sculpture) {
+			this.unbind()
+		}
+
+		this.bind(sculpture)
+		this.$el.addClass("active")
+		
+//     app.controller.toolbar.resetMode()
+    app.controller.toolbar.resetControls()
+		// Sculpture.resize.show(sculpture)
+		Sculpture.hovering = true
+		
+		var media = sculpture.media
+		
+		// console.log(media)
+		
+		this.$name.val(media.title) // || filenameFromUrl(media.url) )
+		this.$description.val(media.description)
+		this.setDimensions()
+		this.$units.val( "ft" )
+		
+		switch (media.type) {
+			case "image":
+				this.$(".video").hide()
+				this.$(".audio").hide()
+				this.$(".image").show()
+				break
+
+			case "youtube":
+			case "vimeo":
+			case "video":
+				this.$(".image").hide()
+				this.$(".audio").hide()
+				this.$(".video").show()
+				
+				this.$playButton.toggleClass("paused", ! this.sculpture.paused())
+				this.$autoplay.prop('checked', !! media.autoplay)
+				this.$loop.prop('checked', !! media.loop)
+				this.$mute.prop('checked', !! media.mute)
+				this.$keyframe.val( Number(media.keyframe || 0) )
+				break
+			
+			case "soundcloud":
+				this.$(".image").hide()
+				this.$(".video").hide()
+				this.$(".audio").show()
+				this.$playButton.toggleClass("paused", ! this.sculpture.paused())
+				this.$autoplay.prop('checked', !! media.autoplay)
+				this.$loop.prop('checked', !! media.loop)
+			  break
+		}
+	},
+
+	hide: function(sculpture){
+		if (this.sculpture) {
+			this.unbind()
+		}
+		this.toggle(false)
+	},
+	
+	seek: function(){
+		var n = parseFloat( this.$keyframe.val() )
+		this.sculpture.seek(n)
+		this.tainted = true
+		
+		this.sculpture.media.keyframe = n
+	},
+	setAutoplay: function(){
+		var checked = this.$autoplay.prop('checked')
+		this.sculpture.media.autoplay = checked
+		this.tainted = true
+		if (checked && this.sculpture.paused()) {
+			this.togglePaused()
+		}
+	},
+	setLoop: function(){
+		var checked = this.$loop.prop('checked')
+		this.sculpture.setLoop(checked)
+		this.tainted = true
+	},
+	setMute: function(){
+		var checked = this.$mute.prop('checked')
+		this.sculpture.media.mute = checked
+		this.sculpture.mute(checked)
+		this.tainted = true
+	},
+
+	setDimensions: function(){
+	  if (! this.sculpture) return
+		this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" )
+		this.$height.unitVal( Number(this.sculpture.naturalDimensions.b * this.sculpture.scale) || "" )
+		this.tainted = true
+	},
+	changeWidth: function(e){
+		e.stopPropagation()
+		this.sculpture.set_scale( this.$width.unitVal() / this.sculpture.naturalDimensions.a )
+		this.setDimensions()
+	},
+	changeHeight: function(e){
+		e.stopPropagation()
+		this.sculpture.set_scale( this.$height.unitVal() / this.sculpture.naturalDimensions.b )
+		this.setDimensions()
+	},
+	changeUnits: function(){
+		app.units = this.$units.val()
+		this.$('.units').resetUnitVal()
+	},
+	
+	taint: function(e){
+	  e.stopPropagation()
+		this.tainted = true
+	},
+
+	bind: function(sculpture){
+		this.sculpture = sculpture
+		this.sculpture.mx.bound = true
+		this.sculpture.mx.el.classList.add("picked")
+	},
+	
+	unbind: function(){
+	  if (this.sculpture) {
+	    this.sculpture.focused = false
+	    if (this.tainted && this.sculpture.media) {
+        this.sculpture.media.title = this.$name.val()
+        this.sculpture.media.description = this.$description.val()
+        Minotaur.watch( app.router.editorView.settings )
+      }
+	    if (this.sculpture.mx) {
+        this.sculpture.mx.bound = false
+        this.sculpture.mx.el.classList.remove("picked")
+      }
+    }
+    this.tainted = false
+    this.sculpture = null
+	},
+	
+	destroy: function(){
+    var sculpture = this.sculpture
+    this.hide()
+
+    sculpture.remove()
+    
+    this.tainted = false
+    this.sculpture = null
+	},
+
+})
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index ca6cc94..1eda8bd 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -74,6 +74,7 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/video.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/_sculpture.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/move.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/_object.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/image.js"></script>
 
@@ -124,6 +125,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaViewer.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/Presets.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/SculptureEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/TextEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/WallpaperPicker.js"></script>
 
-- 
cgit v1.2.3-70-g09d2


From d7c461e09e9ed644e35be86f067ccbe6d19e8b8c Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 3 Apr 2015 20:23:30 -0400
Subject: moving statues

---
 .../rectangles/engine/sculpture/move.js            | 77 ++--------------------
 1 file changed, 7 insertions(+), 70 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js
index b5a4b40..28d707e 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/move.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js
@@ -8,7 +8,6 @@ Sculpture.move = function(base){
 	this.bind = function(){
 		Sculpture.mouse.bind_el(base.mx.el)
 		Sculpture.mouse.on("down", down)
-		Sculpture.mouse.on("enter", switch_wall)
 		Sculpture.mouse.on("drag", drag)
 		Sculpture.mouse.on("up", up)
 	}
@@ -17,7 +16,6 @@ Sculpture.move = function(base){
 	  base.focused = false
 		Sculpture.mouse.unbind_el(base.mx.el)
 		Sculpture.mouse.off("down", down)
-		Sculpture.mouse.off("enter", switch_wall)
 		Sculpture.mouse.off("drag", drag)
 		Sculpture.mouse.off("up", up)
 	}
@@ -49,7 +47,6 @@ Sculpture.move = function(base){
 		
 		bounds = base.bounds
 		dimension = base.dimensions
-		position = base.wall.mxToPosition( base.mx, dimension )
 		
 		oldState = base.serialize()
 		document.body.classList.add("dragging")
@@ -60,32 +57,18 @@ Sculpture.move = function(base){
 		
 		moved = true
 
-		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 = position.a + delta.a * cos(base.wall.rotationY) + dimension.a / 2
-				break
-			case LEFT:
-			case RIGHT:
-				base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2
-				break
-		}
+    // here we need to move the element based on the XY coords, as 
+		// base.mx.y = position.b + delta.b + dimension.b / 2
+    base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY)
+    base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY)
 
-		if (editor.permissions.resize) {
-			Sculpture.resize.move_dots()
-		}
+// 		if (editor.permissions.resize) {
+// 			Sculpture.resize.move_dots()
+// 		}
 	}
 
 	function up (e, cursor){
@@ -107,52 +90,6 @@ Sculpture.move = function(base){
 		document.body.classList.remove("dragging")
   }
 	
-	function switch_wall (e, target, cursor){
-		if (! dragging) return
-		if (target.wall.id == base.wall.id) return
-		
-		var old_wall_side = base.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)
-
-		if (! new_bounds) return
-
-		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:
-					position.a = bounds.x.a + dimension.a / 2
-					break
-				case BACK:
-					position.a = bounds.x.b - dimension.a / 2
-					break
-				case LEFT:
-					position.a = bounds.x.a + dimension.a / 2
-					break
-				case RIGHT:
-					position.a = bounds.x.b - dimension.a / 2
-					break
-			}
-		}
-
-		var mx_delta = base.wall.positionToMx( position, dimension )
-		base.mx.move(mx_delta)
-
-		if (editor.permissions.resize) {
-			Sculpture.resize.rotate_dots()
- 			Sculpture.resize.move_dots()
-		}
-
-		cursor.x.a = cursor.x.b
-		//var delta = cursor.delta()
-		drag(e, cursor)
-
-	}
-	
 	return this
 
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 24543d0839ad51b2afa7195b16d29bc52b3f1a1b Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Apr 2015 13:15:19 -0400
Subject: remove sculpture

---
 .../javascripts/mx/extensions/mx.movements.js      |  5 +++-
 .../rectangles/engine/sculpture/types/_object.js   | 12 +++++++++
 .../javascripts/ui/editor/SculptureEditor.js       | 31 +++++++++++++++++++++-
 public/assets/stylesheets/app.css                  |  3 +++
 views/controls/editor/sculpture.ejs                | 10 +++----
 5 files changed, 54 insertions(+), 7 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index bc71fc4..931caac 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -162,7 +162,10 @@ MX.Movements = function (cam) {
 				
 				case 8: // backspace
 				  e.preventDefault()
-          if (app.controller.mediaEditor.scenery) {
+          if (app.controller.sculptureEditor.sculpture) {
+            app.controller.sculptureEditor.sculpture.remove()
+          }
+          else if (app.controller.mediaEditor.scenery) {
             app.controller.mediaEditor.scenery.remove()
           }
           else if (app.controller.textEditor.scenery) {
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index 6c93b41..48fd96a 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -43,6 +43,18 @@ Sculpture.types.base = Fiber.extend(function(base){
 			this.move.unbind()
 		},
 		
+		setOutline: function(val){
+		  this.outline = val
+		  // show/hide outline
+		},
+		setOutlineColor: function(val){
+		  this.outlineColor = val
+		  // set outline color
+		},
+		setBillboard: function(val){
+		  this.billboard = val
+		},
+		
 		remove: function(){
 		  if (this.removed) return
 		  this.removed = true
diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js
index cce000e..ab0ccd2 100644
--- a/public/assets/javascripts/ui/editor/SculptureEditor.js
+++ b/public/assets/javascripts/ui/editor/SculptureEditor.js
@@ -10,12 +10,15 @@ var SculptureEditor = FormView.extend({
 		"mousedown": "stopPropagation",
 		"change [name=keyframe]": "seek",
 		"change [name=autoplay]": "setAutoplay",
+		"change [name=billboard]": "setBillboard",
+		"change [name=outline]": "setOutline",
+		"change [name=outlineColor]": "setOutlineColor",
 		"change [name=loop]": "setLoop",
 		"change [name=mute]": "setMute",
 		"change [name=width]": 'changeWidth',
 		"change [name=height]": 'changeHeight',
 		"change [name=units]": 'changeUnits',
-		"click [data-role=destroy-media]": "destroy",
+		"click [data-role=destroy-sculpture]": "destroy",
 	},
 	
 	initialize: function(opt){
@@ -25,6 +28,10 @@ var SculptureEditor = FormView.extend({
 		this.$name = this.$("[name=name]")
 		this.$description = this.$("[name=description]")
 
+		this.$billboard = this.$("[name=billboard]")
+		this.$outline = this.$("[name=outline]")
+		this.$outlineColor = this.$("[name=outlineColor]")
+
 		// image fields
 		this.$width = this.$("[name=width]")
 		this.$height = this.$("[name=height]")
@@ -71,6 +78,11 @@ var SculptureEditor = FormView.extend({
 		this.$description.val(media.description)
 		this.setDimensions()
 		this.$units.val( "ft" )
+
+		this.$outline.prop( 'checked', !! media.outline )
+		this.$outlineColor.val( media.outlineColor )
+		this.$billboard.prop( 'checked', !! media.billboard )
+
 		
 		switch (media.type) {
 			case "image":
@@ -138,6 +150,23 @@ var SculptureEditor = FormView.extend({
 		this.tainted = true
 	},
 
+
+	setBillboard: function(){
+		var checked = this.$billboard.prop('checked')
+		this.sculpture.setBillboard(checked)
+		this.tainted = true
+	},
+	setOutline: function(){
+		var checked = this.$outline.prop('checked')
+		this.sculpture.setOutline(checked)
+		this.tainted = true
+	},
+	setOutlineColor: function(){
+		var color = this.$outlineColor.val()
+		this.sculpture.setOutlineColor(color)
+		this.tainted = true
+	},
+
 	setDimensions: function(){
 	  if (! this.sculpture) return
 		this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" )
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index b23b50b..6e97500 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -2455,6 +2455,9 @@ input[type="range"]::-webkit-slider-thumb {
 #mediaEditor .setting.number [type=text] {
 	width: 140px;
 }
+#sculptureEditor .setting.number input[type=text] {
+  width: 130px;
+}
 
 .playButton,.muteButton {
 	border-radius: 50%;
diff --git a/views/controls/editor/sculpture.ejs b/views/controls/editor/sculpture.ejs
index 21e5039..4b8535a 100644
--- a/views/controls/editor/sculpture.ejs
+++ b/views/controls/editor/sculpture.ejs
@@ -13,14 +13,14 @@
 	</div>
 	
 	<div class="setting">
-	  <input type="checkbox" name="outline" value="1" id="sculpture_outline">
-	  <label for="sculpture_outline">Show outline?</label>
-	  <input type="color" name="color" value="#000000">
+	  <input type="checkbox" name="outline" value="1" id="sculpture-outline">
+	  <label for="sculpture-outline">Show outline?</label>
+	  <input type="color" name="outlineColor" value="#000000">
 	</div>
 
   <div class="setting">
-	  <input type="checkbox" name="billboard" value="1" id="sculpture_billboard">
-	  <label for="sculpture_billboard">Billboard?</label>
+	  <input type="checkbox" name="billboard" value="1" id="sculpture-billboard">
+	  <label for="sculpture-billboard">Billboard?</label>
   </div>
 
 	<div class="setting number">
-- 
cgit v1.2.3-70-g09d2


From cee602fc6e1431fd505665a7b285c3fa85d32d3e Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Apr 2015 13:17:15 -0400
Subject: toggle billboard

---
 .../javascripts/rectangles/engine/sculpture/types/_object.js      | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index 48fd96a..489a6a1 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -53,7 +53,13 @@ Sculpture.types.base = Fiber.extend(function(base){
 		},
 		setBillboard: function(val){
 		  this.billboard = val
-		},
+	    if (this.billboard) {
+	      this.mx.rotationY = cam.rotationY
+	    }
+	    else {
+	      this.mx.rotationY = PI/2
+	    }
+    },
 		
 		remove: function(){
 		  if (this.removed) return
-- 
cgit v1.2.3-70-g09d2


From 546fba7ee9dac48d2fb0015709247b1b2efca8bc Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Apr 2015 14:31:24 -0400
Subject: store billboard setting

---
 public/assets/javascripts/rectangles/engine/scenery/resize.js      | 2 +-
 .../javascripts/rectangles/engine/sculpture/types/_object.js       | 6 ++++++
 public/assets/javascripts/ui/editor/EditorView.js                  | 1 +
 public/assets/javascripts/ui/editor/SculptureEditor.js             | 7 +++----
 4 files changed, 11 insertions(+), 5 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js
index a5e255a..006ff2a 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/resize.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js
@@ -49,7 +49,7 @@ Scenery.resize = new function(){
 	
 	// rotate the dots as appropriate
 	base.rotate_dots = function(){
-	console.trace()
+	  // console.trace()
 		rotationY = obj.wall.rotationY
 		dots.forEach(function(dot){
 			dot.rotationY = rotationY
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index 489a6a1..b903c5b 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -54,9 +54,13 @@ Sculpture.types.base = Fiber.extend(function(base){
 		setBillboard: function(val){
 		  this.billboard = val
 	    if (this.billboard) {
+	      this.mx.el.classList.add("backface-visible")
+	      this.mx.el.classList.remove("backface-hidden")
 	      this.mx.rotationY = cam.rotationY
 	    }
 	    else {
+	      this.mx.el.classList.add("backface-hidden")
+	      this.mx.el.classList.remove("backface-visible")
 	      this.mx.rotationY = PI/2
 	    }
     },
@@ -106,6 +110,8 @@ Sculpture.types.base = Fiber.extend(function(base){
 				scale: this.scale,
 				media: this.media,
         billboard: this.billboard,
+        outline: this.outline,
+        outlineColor: this.outlineColor,
         backface: this.backface,
 			}
 			return data
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index e5e2ca0..a7b4f20 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -80,6 +80,7 @@ var EditorView = View.extend({
 	},
 	
 	hideExtras: function(){
+		this.sculptureEditor.hide()
 		this.mediaEditor.hide()
 		this.textEditor.hide()
 		this.share.hide()
diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js
index ab0ccd2..ff1e6b9 100644
--- a/public/assets/javascripts/ui/editor/SculptureEditor.js
+++ b/public/assets/javascripts/ui/editor/SculptureEditor.js
@@ -79,10 +79,9 @@ var SculptureEditor = FormView.extend({
 		this.setDimensions()
 		this.$units.val( "ft" )
 
-		this.$outline.prop( 'checked', !! media.outline )
-		this.$outlineColor.val( media.outlineColor )
-		this.$billboard.prop( 'checked', !! media.billboard )
-
+		this.$outline.prop( 'checked', !! sculpture.outline )
+		this.$outlineColor.val( sculpture.outlineColor || "#000000" )
+		this.$billboard.prop( 'checked', !! sculpture.billboard )
 		
 		switch (media.type) {
 			case "image":
-- 
cgit v1.2.3-70-g09d2


From 0b8b54e26aa7a40065a0be6f7708b7021e4fec13 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Apr 2015 15:03:35 -0400
Subject: resize scenery

---
 Gruntfile.js                                       |   1 +
 .../rectangles/engine/scenery/resize.js            |   1 +
 .../rectangles/engine/sculpture/_sculpture.js      |   4 +
 .../rectangles/engine/sculpture/move.js            |   6 +-
 .../rectangles/engine/sculpture/resize.js          | 207 +++++++++++++++++++++
 .../rectangles/engine/sculpture/types/_object.js   |   2 +-
 .../assets/javascripts/rectangles/models/floor.js  |   2 +-
 public/assets/javascripts/ui/editor/EditorView.js  |   1 +
 .../javascripts/ui/editor/SculptureEditor.js       |   3 +-
 views/partials/scripts.ejs                         |   1 +
 10 files changed, 221 insertions(+), 7 deletions(-)
 create mode 100644 public/assets/javascripts/rectangles/engine/sculpture/resize.js

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/Gruntfile.js b/Gruntfile.js
index 026ec6f..789ce6f 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -79,6 +79,7 @@ module.exports = function(grunt) {
 
           "public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js",
           "public/assets/javascripts/rectangles/engine/sculpture/move.js",
+          "public/assets/javascripts/rectangles/engine/sculpture/resize.js",
           "public/assets/javascripts/rectangles/engine/sculpture/types/_object.js",
           "public/assets/javascripts/rectangles/engine/sculpture/types/image.js",
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js
index 006ff2a..8dac140 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/resize.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js
@@ -8,6 +8,7 @@ Scenery.resize = new function(){
 	var dragging = false
 	var naturalDimension, naturalDimensionCopy, dimension, position, scale
 	var oldState
+  var rotationY
 
 	var dots = [], dot, selected_dot
 
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
index 1543def..888b925 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js
@@ -9,6 +9,7 @@ var Sculpture = new function(){
 	
 	base.init = function(){
 	  app.on("move", base.updateBillboards)
+	  base.resize.init()
 	}
 	
 	base.updateBillboards = function(){
@@ -17,6 +18,9 @@ var Sculpture = new function(){
 	      sculpture.mx.rotationY = cam.rotationY
 	    }
 	  })
+	  if (Sculpture.resize.obj && Sculpture.resize.obj.billboard) {
+	    Sculpture.resize.move_dots()
+	  }
 	}
 
 	base.add = function(opt){
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js
index 28d707e..f968bcf 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/move.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js
@@ -66,9 +66,9 @@ Sculpture.move = function(base){
     base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY)
     base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY)
 
-// 		if (editor.permissions.resize) {
-// 			Sculpture.resize.move_dots()
-// 		}
+		if (editor.permissions.resize) {
+			Sculpture.resize.move_dots()
+		}
 	}
 
 	function up (e, cursor){
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/resize.js b/public/assets/javascripts/rectangles/engine/sculpture/resize.js
new file mode 100644
index 0000000..53b8b2d
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/sculpture/resize.js
@@ -0,0 +1,207 @@
+Sculpture.resize = new function(){
+
+	var base = this
+	
+	var obj
+	var x, y, z, bounds
+	var dragging = false
+	var naturalDimension, naturalDimensionCopy, dimension, position, scale
+	var oldState
+  var rotationY
+
+	var dots = [], dot, selected_dot
+
+	base.init = function(){
+		base.build()
+		base.bind()
+	}
+	
+	// create 9 dots at the corners of the div
+	base.build = function(){
+		[ TOP,
+			TOP_RIGHT,
+			RIGHT,
+			BOTTOM_RIGHT,
+			BOTTOM,
+			BOTTOM_LEFT,
+			LEFT,
+			TOP_LEFT ].forEach(base.build_dot)
+	}
+	
+	// generate a dot element
+	base.build_dot = function(side) {
+		var dot = new MX.Object3D('.dot')
+		dot.width = dot.height = dot_side * 2
+		dot.scale = 0.5
+		dot.side = side
+		$(dot.el).on({
+			mouseenter: function(){ base.hovering = true },
+			mouseleave: function(){ base.hovering = false },
+		})
+		dots.push(dot)
+	}
+
+	base.add_dots = function(){
+		dots.forEach(function(dot){
+			scene.add(dot)
+		})
+	}
+	
+	// move all the dots to the object's current position
+	base.move_dots = function(){
+		rotationY = obj.mx.rotationY
+
+		var x = obj.mx.x + sin(rotationY) * dot_distance_from_picture
+		var y = obj.mx.y
+		var z = obj.mx.z - cos(rotationY) * dot_distance_from_picture
+
+		dots.forEach(function(dot){
+			base.move_dot(dot, { x: x, y: y, z: z, rotationY: rotationY })
+		})
+	}
+		
+	// move a dot .. to the initial position of the image
+	base.move_dot = function(dot, pos){
+		if (dot.side & TOP) {
+			pos.y += obj.dimensions.b / 2
+		}
+		if (dot.side & BOTTOM) {
+			pos.y -= obj.dimensions.b / 2
+		}
+		if (dot.side & LEFT) {
+			pos.x -= cos(rotationY) * (obj.dimensions.a) / 2
+			pos.z -= sin(rotationY) * (obj.dimensions.a) / 2
+		}
+		if (dot.side & RIGHT) {
+			pos.x += cos(rotationY) * (obj.dimensions.a) / 2
+			pos.z += sin(rotationY) * (obj.dimensions.a) / 2
+		}
+		dot.move(pos)
+	}
+
+	// pick a new object to focus on and show the dots
+	base.show = function(new_object) {
+		// if (obj === new_object) return
+    if (! new_object) return
+		base.obj = obj = new_object
+		base.add_dots()
+		base.move_dots()
+	}
+
+	// dismiss the dots on blur
+	var dotsHideTimeout;
+	base.defer_hide = function(){
+		clearTimeout(dotsHideTimeout)
+
+		dotsHideTimeout = setTimeout(function(){
+			if (Scenery.hovering || Scenery.resize.hovering || Scenery.mouse.down) return
+			Scenery.resize.hide()
+		}, dot_hide_delay)
+	}
+
+	base.hide = function () {
+	  if (! obj) return
+		base.obj = obj = null
+		dots.forEach(function(dot){
+			scene.remove(dot)
+		})
+	}
+
+	base.bind = function(){
+		dots.forEach(function(dot){
+			Sculpture.mouse.bind_el(dot.el)
+		})
+		Sculpture.mouse.on("down", down)
+		Sculpture.mouse.on("drag", drag)
+		Sculpture.mouse.on("up", up)
+	}
+
+	base.unbind = function(){
+		dots.forEach(function(dot){
+			Sculpture.mouse.unbind_el(dot.el)
+		})
+		Sculpture.mouse.off("down", down)
+		Sculpture.mouse.off("drag", drag)
+		Sculpture.mouse.off("up", up)
+	}
+
+	function down (e, cursor){
+		var selection = dots.filter(function(dot){return e.target == dot.el})
+		if (! selection.length) return
+
+		selected_dot = selection[0]
+		dragging = true
+
+		naturalDimension = obj.naturalDimensions
+		dimension = obj.dimensions
+		position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z)
+		oldState = obj.serialize()
+		
+		if (obj.type == "text") {
+		  naturalDimensionCopy = naturalDimension.clone()
+		  positionCopy = position.clone()
+		}
+
+		document.body.classList.add("dragging")
+	}
+
+	function drag (e, cursor){
+		if (! dragging) return
+
+		var x_sign = selected_dot.side & LEFT ? -1 : selected_dot.side & RIGHT ? 1 : 0
+		var y_sign = selected_dot.side & TOP ? -1 : selected_dot.side & BOTTOM ? 1 : 0
+		var width = cursor.x.magnitude()
+		var height = cursor.y.magnitude()
+		var mag = cursor.magnitude()
+
+		if (abs(width) > abs(height)) {
+			mag = x_sign * mag * sign(width)
+		}
+		else {
+			mag = y_sign * mag * sign(height)
+		}
+
+    if (obj.type == "text") {
+      obj.mx.width = obj.media.width = naturalDimension.a = naturalDimensionCopy.a + (mag * 2)
+      obj.mx.height = obj.media.height = naturalDimension.b = naturalDimensionCopy.b + (mag * 2)
+      dimension.a = naturalDimension.a * obj.scale
+      dimension.b = naturalDimension.b * obj.scale
+    }
+    else {
+      obj.set_scale( ( dimension.a + mag ) / naturalDimension.a )
+    }
+
+    if (selected_dot.side & LEFT_RIGHT) {
+      obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign)
+      obj.mx.z = position.c + sin(rotationY) * mag/2 * (x_sign)
+    }
+    if (selected_dot.side & TOP_BOTTOM) {
+      obj.mx.y = position.b - mag/2 * y_sign
+    }
+
+		base.move_dots()
+		
+		app.controller.sculptureEditor.setDimensions()
+	}
+
+	function up (e, cursor){
+    if (! dragging) return
+		dragging = false
+		if (! editor.permissions.resize) { return }
+
+    obj.scale = obj.mx.ops.scale = obj.mx.scale
+    obj.dimensions.assign(obj.naturalDimensions).mul(obj.scale)
+    
+    UndoStack.push({
+      type: 'update-sculpture',
+      undo: oldState,
+      redo: obj.serialize(),
+    })
+
+    // TODO: watch individual scenery object here
+    Minotaur.watch( app.router.editorView.settings )
+
+		document.body.classList.remove("dragging")
+		selected_dot = null
+	}
+}
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index b903c5b..390c42e 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -80,7 +80,7 @@ Sculpture.types.base = Fiber.extend(function(base){
 
 			Sculpture.remove(this.id)
 
-      // Sculpture.resize.hide()
+      Sculpture.resize.hide()
       if (app.controller.sculptureEditor) {
         app.controller.sculptureEditor.tainted = false
         app.controller.sculptureEditor.hide()
diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js
index 530de2b..799bdc7 100644
--- a/public/assets/javascripts/rectangles/models/floor.js
+++ b/public/assets/javascripts/rectangles/models/floor.js
@@ -90,7 +90,7 @@
             }
 
             app.controller.toolbar.resetPermissions()
-            // Sculpture.resize.show(sculpture)
+            Sculpture.resize.show(sculpture)
             Sculpture.hovering = true 
           
             // app.controller.pick(sculpture)
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index a7b4f20..a2d84a6 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -84,6 +84,7 @@ var EditorView = View.extend({
 		this.mediaEditor.hide()
 		this.textEditor.hide()
 		this.share.hide()
+		Sculpture.resize.hide()
     Scenery.resize.hide()
 		Scenery.hovering = false
   }
diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js
index ff1e6b9..35abc00 100644
--- a/public/assets/javascripts/ui/editor/SculptureEditor.js
+++ b/public/assets/javascripts/ui/editor/SculptureEditor.js
@@ -67,7 +67,7 @@ var SculptureEditor = FormView.extend({
 		
 //     app.controller.toolbar.resetMode()
     app.controller.toolbar.resetControls()
-		// Sculpture.resize.show(sculpture)
+		Sculpture.resize.show(sculpture)
 		Sculpture.hovering = true
 		
 		var media = sculpture.media
@@ -149,7 +149,6 @@ var SculptureEditor = FormView.extend({
 		this.tainted = true
 	},
 
-
 	setBillboard: function(){
 		var checked = this.$billboard.prop('checked')
 		this.sculpture.setBillboard(checked)
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 1eda8bd..6dfe912 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -75,6 +75,7 @@
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/_sculpture.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/move.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/resize.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/_object.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/image.js"></script>
 
-- 
cgit v1.2.3-70-g09d2


From 06fc629e2be66d79e94a02b169e12bc0918d0881 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Apr 2015 15:45:55 -0400
Subject: shift-drag scupltures up and down; dont drag through floor

---
 .../assets/javascripts/rectangles/engine/scenery/move.js |  2 +-
 .../javascripts/rectangles/engine/sculpture/move.js      | 16 ++++++++++++----
 .../rectangles/engine/sculpture/types/image.js           |  2 +-
 public/assets/javascripts/rectangles/util/constants.js   |  3 ++-
 4 files changed, 16 insertions(+), 7 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index dd60a61..94c6281 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -28,7 +28,7 @@ Scenery.move = function(base){
 		  base.remove()
 			return
 		}
-
+    
 		// load the modal
 		app.controller.pick(base)
 
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js
index f968bcf..4f6d176 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/move.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js
@@ -2,8 +2,9 @@
 Sculpture.move = function(base){
 
 	var x, y, z, position, dimension, bounds
-	var dragging = false, moved = false
+	var dragging = false, shiftPressed = false, moved = false
 	var oldState
+	var height, width
 
 	this.bind = function(){
 		Sculpture.mouse.bind_el(base.mx.el)
@@ -39,11 +40,13 @@ Sculpture.move = function(base){
 			e.clickAccepted = false
 			return
 		}
+    shiftPressed = e.shiftKey
 		dragging = true
 		moved = false
 		x = base.mx.x
 		y = base.mx.y
 		z = base.mx.z
+		height = base.mx.height * base.mx.scale
 		
 		bounds = base.bounds
 		dimension = base.dimensions
@@ -63,9 +66,14 @@ Sculpture.move = function(base){
 
     // here we need to move the element based on the XY coords, as 
 		// base.mx.y = position.b + delta.b + dimension.b / 2
-    base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY)
-    base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY)
-
+    if (e.shiftKey) {
+      base.mx.y = clamp( y + delta.b, height/2 + sculpture_distance_from_floor, Infinity )
+    }
+    else {
+      base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY)
+      base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY)
+    }
+    
 		if (editor.permissions.resize) {
 			Sculpture.resize.move_dots()
 		}
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
index 3e5ab08..1a53f5b 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js
@@ -25,7 +25,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){
 			})
 
       if (opt.position) {
-        opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3
+        opt.position.y = opt.position.y || this.scale * this.media.height/2 + sculpture_distance_from_floor
         opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY
       }
       
diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js
index 3bc314c..a70cacd 100644
--- a/public/assets/javascripts/rectangles/util/constants.js
+++ b/public/assets/javascripts/rectangles/util/constants.js
@@ -25,7 +25,8 @@ var height_min = 200,
 		MAP_GRID_SIZE = 360          // 10 feet
 
 var painting_distance_from_wall = 10,
-		dot_distance_from_picture = 3
+		dot_distance_from_picture = 3,
+		sculpture_distance_from_floor = 3
 
 var dot_hide_delay = 50, // ms
 		dot_side = 20
-- 
cgit v1.2.3-70-g09d2


From 6ce9d713a9ffdbf27155718ca8c9a3a4645389f2 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Apr 2015 16:45:09 -0400
Subject: alt to rotate a non-billboard scenery obj

---
 public/assets/javascripts/rectangles/engine/sculpture/move.js | 11 +++++++++--
 .../javascripts/rectangles/engine/sculpture/types/_object.js  |  8 ++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js
index 4f6d176..e571c3b 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/move.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js
@@ -2,7 +2,8 @@
 Sculpture.move = function(base){
 
 	var x, y, z, position, dimension, bounds
-	var dragging = false, shiftPressed = false, moved = false
+	var rotationY
+	var dragging = false, altPressed = false, shiftPressed = false, moved = false
 	var oldState
 	var height, width
 
@@ -40,12 +41,14 @@ Sculpture.move = function(base){
 			e.clickAccepted = false
 			return
 		}
+		altPressed = (e.altKey && ! base.billboard)
     shiftPressed = e.shiftKey
 		dragging = true
 		moved = false
 		x = base.mx.x
 		y = base.mx.y
 		z = base.mx.z
+		rotationY = base.mx.rotationY
 		height = base.mx.height * base.mx.scale
 		
 		bounds = base.bounds
@@ -66,9 +69,13 @@ Sculpture.move = function(base){
 
     // here we need to move the element based on the XY coords, as 
 		// base.mx.y = position.b + delta.b + dimension.b / 2
-    if (e.shiftKey) {
+    if (shiftPressed) {
       base.mx.y = clamp( y + delta.b, height/2 + sculpture_distance_from_floor, Infinity )
     }
+    else if (altPressed) {
+      base.mx.rotationY = mod( rotationY + delta.a / (window.innerWidth / 2) , TWO_PI )
+      Sculpture.resize.move_dots()
+    }
     else {
       base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY)
       base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY)
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index 390c42e..a9c1669 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -54,13 +54,13 @@ Sculpture.types.base = Fiber.extend(function(base){
 		setBillboard: function(val){
 		  this.billboard = val
 	    if (this.billboard) {
-	      this.mx.el.classList.add("backface-visible")
-	      this.mx.el.classList.remove("backface-hidden")
+	      this.mx.el.classList.add("backface-hidden")
+	      this.mx.el.classList.remove("backface-visible")
 	      this.mx.rotationY = cam.rotationY
 	    }
 	    else {
-	      this.mx.el.classList.add("backface-hidden")
-	      this.mx.el.classList.remove("backface-visible")
+	      this.mx.el.classList.add("backface-visible")
+	      this.mx.el.classList.remove("backface-hidden")
 	      this.mx.rotationY = PI/2
 	    }
     },
-- 
cgit v1.2.3-70-g09d2


From e2bb9e31b5cafe6bac49ef97dd791ab217797e94 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 20 Apr 2015 16:51:41 -0400
Subject: wall

---
 public/assets/javascripts/rectangles/engine/sculpture/types/_object.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index a9c1669..5dd0aae 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -63,6 +63,7 @@ Sculpture.types.base = Fiber.extend(function(base){
 	      this.mx.el.classList.remove("backface-hidden")
 	      this.mx.rotationY = PI/2
 	    }
+	    Sculpture.resize.move_dots()
     },
 		
 		remove: function(){
-- 
cgit v1.2.3-70-g09d2


From 53695472cfb20b730d04b2d6a6a16c6d281e9180 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 27 Apr 2015 20:47:41 -0400
Subject: outline box

---
 .../rectangles/engine/sculpture/move.js            |  1 +
 .../rectangles/engine/sculpture/resize.js          |  3 +-
 .../rectangles/engine/sculpture/types/_object.js   | 52 +++++++++++++++++++---
 .../assets/javascripts/rectangles/models/vec3.js   | 18 +++++++-
 .../javascripts/rectangles/util/measurement.js     |  4 ++
 .../javascripts/ui/editor/SculptureEditor.js       | 11 +++++
 public/assets/stylesheets/app.css                  |  7 +++
 views/controls/editor/sculpture.ejs                |  2 +-
 8 files changed, 90 insertions(+), 8 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js
index e571c3b..0cbeccd 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/move.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js
@@ -83,6 +83,7 @@ Sculpture.move = function(base){
     
 		if (editor.permissions.resize) {
 			Sculpture.resize.move_dots()
+			base.updateOutline()
 		}
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/resize.js b/public/assets/javascripts/rectangles/engine/sculpture/resize.js
index 53b8b2d..5f21d66 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/resize.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/resize.js
@@ -180,7 +180,8 @@ Sculpture.resize = new function(){
     }
 
 		base.move_dots()
-		
+    obj.updateOutline()
+
 		app.controller.sculptureEditor.setDimensions()
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index 5dd0aae..2f24ae5 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -6,7 +6,8 @@ Sculpture.types.base = Fiber.extend(function(base){
 			this.id = opt.id || Sculpture.uid("sculpture")
 			// this.move = new Sculpture.move (this)
 			this.media = opt.media
-			this.naturalDimensions = new vec2(this.media.width, this.media.height)
+			this.naturalDimensions = new vec3(this.media.width, this.media.height, this.media.width)
+			this.dimensions = new vec3(this.media.width, this.media.height, this.media.width)
 			
 			this.move = new Sculpture.move (this)
       this.billboard = true
@@ -14,7 +15,7 @@ Sculpture.types.base = Fiber.extend(function(base){
 
 			this.set_scale( opt.scale || this.media.scale || 1.0 )
 			this.position = new vec2(0,0)
-			
+
 			this.isSculpture = true
 		},
 
@@ -25,6 +26,11 @@ Sculpture.types.base = Fiber.extend(function(base){
 			}
 			this.dimensions = this.naturalDimensions.clone().mul(this.scale)
 		},
+		set_depth: function(depth){
+		  console.log(this.dimensions.c, this.naturalDimensions.c, depth)
+		  this.dimensions.c = depth
+		  this.naturalDimensions.c = depth / this.scale
+		},
 
 		place: function(opt){
 			if (opt.data) {
@@ -45,11 +51,16 @@ Sculpture.types.base = Fiber.extend(function(base){
 		
 		setOutline: function(val){
 		  this.outline = val
-		  // show/hide outline
+		  if (val && ! this.outlineEl) {
+		    this.buildOutline()
+		  }
+		  this.outlineEl.el.style.display = val ? "block" : "none"
 		},
 		setOutlineColor: function(val){
 		  this.outlineColor = val
-		  // set outline color
+		  if (this.outlineEl) {
+		    this.outlineColor = this.outlineEl.el.style.borderColor = val
+		  }
 		},
 		setBillboard: function(val){
 		  this.billboard = val
@@ -65,6 +76,32 @@ Sculpture.types.base = Fiber.extend(function(base){
 	    }
 	    Sculpture.resize.move_dots()
     },
+    
+    buildOutline: function(){
+      this.outlineEl = new MX.Object3D(".mx-outline")
+      this.outlineEl.width = this.naturalDimensions.a
+      this.outlineEl.height = this.naturalDimensions.c
+      this.outlineEl.scale = this.mx.scale
+      this.outlineEl.rotationX = -PI/2
+      this.outlineEl.x = this.mx.x
+      this.outlineEl.y = sculpture_distance_from_floor
+      this.outlineEl.z = this.mx.z
+      this.outlineEl.el.style.borderColor = this.outlineColor || "#000000"
+      scene.add(this.outlineEl)
+    },
+    updateOutline: function(){
+      if (! this.outline) { return }
+      if (! this.outlineEl) {
+		    this.buildOutline()
+		  }
+      this.outlineEl.x = this.mx.x
+      this.outlineEl.y = sculpture_distance_from_floor
+      this.outlineEl.z = this.mx.z
+      this.outlineEl.width = this.naturalDimensions.a
+      this.outlineEl.height = this.naturalDimensions.c
+      
+      this.outlineEl.scale = this.mx.scale
+    },
 		
 		remove: function(){
 		  if (this.removed) return
@@ -112,7 +149,7 @@ Sculpture.types.base = Fiber.extend(function(base){
 				media: this.media,
         billboard: this.billboard,
         outline: this.outline,
-        outlineColor: this.outlineColor,
+        outlineColor: this.outlineColor || "#000000",
         backface: this.backface,
 			}
 			return data
@@ -123,9 +160,14 @@ Sculpture.types.base = Fiber.extend(function(base){
 			this.mx.ops.width = data.dimensions.a
 			this.mx.ops.height = data.dimensions.b
 			this.billboard = data.billboard
+			this.outline = data.outline
+			this.outlineColor = data.outlineColor || "#000000"
 			this.backface = data.backface
 			if (! this.backface) this.mx.el.classList.remove("backface-visible")
       this.dimensions.deserialize(data.dimensions)
+      if (this.outline) {
+        this.buildOutline()
+      }
 		},
 	}
 	
diff --git a/public/assets/javascripts/rectangles/models/vec3.js b/public/assets/javascripts/rectangles/models/vec3.js
index 97329ed..b3825a9 100644
--- a/public/assets/javascripts/rectangles/models/vec3.js
+++ b/public/assets/javascripts/rectangles/models/vec3.js
@@ -39,5 +39,21 @@ vec3.prototype.serialize = function(){
 vec3.prototype.deserialize = function(data){
   this.a = data[0]
   this.b = data[1]
-  this.c = data[2]
+  this.c = data[2] || data[0]
+  return this
+}
+vec3.prototype.clone = function(){
+  return new vec3(this.a, this.b, this.c)
+}
+vec3.prototype.assign = function(v){
+  this.a = v.a
+  this.b = v.b
+  this.c = v.c
+  return this
+}
+vec3.prototype.mul = function(n) {
+  this.a *= n
+  this.b *= n
+  this.c *= n
+  return this
 }
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/util/measurement.js b/public/assets/javascripts/rectangles/util/measurement.js
index d6a0b35..6346eac 100644
--- a/public/assets/javascripts/rectangles/util/measurement.js
+++ b/public/assets/javascripts/rectangles/util/measurement.js
@@ -28,6 +28,10 @@ function measurementToString( n ) {
 		case 'ft':
 			ft = floor(n / 36)
 			inch = abs(round((n % 36) / 3))
+			if (inch == 12) {
+			  inch = 0
+			  ft += 1
+			}
 			s = ft + "'"
 			if (inch > 0) {
 				s += " " + inch + '"'
diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js
index 52663e1..953260c 100644
--- a/public/assets/javascripts/ui/editor/SculptureEditor.js
+++ b/public/assets/javascripts/ui/editor/SculptureEditor.js
@@ -17,6 +17,7 @@ var SculptureEditor = FormView.extend({
 		"change [name=mute]": "setMute",
 		"change [name=width]": 'changeWidth',
 		"change [name=height]": 'changeHeight',
+		"change [name=depth]": 'changeDepth',
 		"change [name=units]": 'changeUnits',
 		"click [data-role=destroy-sculpture]": "destroy",
 	},
@@ -35,6 +36,7 @@ var SculptureEditor = FormView.extend({
 		// image fields
 		this.$width = this.$("[name=width]")
 		this.$height = this.$("[name=height]")
+		this.$depth = this.$("[name=depth]")
 		this.$units = this.$("[name=units]")
 		
 		// video fields
@@ -168,17 +170,26 @@ var SculptureEditor = FormView.extend({
 	  if (! this.sculpture) return
 		this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" )
 		this.$height.unitVal( Number(this.sculpture.naturalDimensions.b * this.sculpture.scale) || "" )
+		this.$depth.unitVal( Number(this.sculpture.naturalDimensions.c * this.sculpture.scale) || "" )
 		this.tainted = true
 	},
 	changeWidth: function(e){
 		e.stopPropagation()
 		this.sculpture.set_scale( this.$width.unitVal() / this.sculpture.naturalDimensions.a )
 		this.setDimensions()
+		this.sculpture.updateOutline()
 	},
 	changeHeight: function(e){
 		e.stopPropagation()
 		this.sculpture.set_scale( this.$height.unitVal() / this.sculpture.naturalDimensions.b )
 		this.setDimensions()
+		this.sculpture.updateOutline()
+	},
+	changeDepth: function(e){
+		e.stopPropagation()
+		this.sculpture.set_depth( this.$depth.unitVal() )
+		this.$depth.unitVal( Number(this.sculpture.naturalDimensions.c * this.sculpture.scale) || "" )
+		this.sculpture.updateOutline()
 	},
 	changeUnits: function(){
 		app.units = this.$units.val()
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 6e97500..6adb2a0 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1205,6 +1205,13 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; }
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
 }
+.mx-outline {
+  border-width: 2px;
+  border-style: dashed;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
 .destroyActive .mx-scene, .destroyActive .mx-object3d.image {
 	cursor:url(/assets/img/delete-cursor.png), auto;
 }
diff --git a/views/controls/editor/sculpture.ejs b/views/controls/editor/sculpture.ejs
index 4b8535a..dfe917f 100644
--- a/views/controls/editor/sculpture.ejs
+++ b/views/controls/editor/sculpture.ejs
@@ -33,7 +33,7 @@
 	</div>
 	<div class="setting number">
 		<label for="sculpture-height">depth</label>
-		<input type="text" class="units" name="height" id="sculpture-height">
+		<input type="text" class="units" name="depth" id="sculpture-depth">
 	</div>
 	<div class="setting">
 		<a href="#" class="warn btn" data-role="destroy-sculpture">remove object</a>
-- 
cgit v1.2.3-70-g09d2


From aaa81d4b52659f991e38994f8fff56ba43baa419 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 28 Apr 2015 17:54:30 -0400
Subject: abstract out map tools

---
 .../javascripts/mx/extensions/mx.movements.js      |   8 +-
 .../javascripts/rectangles/engine/map/ui_ortho.js  |  49 +++
 .../rectangles/engine/sculpture/types/_object.js   |   2 +-
 public/assets/test/ortho2.html                     | 158 ++++-----
 public/assets/test/ortho3.html                     | 394 +++++++++++++++------
 5 files changed, 421 insertions(+), 190 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/sculpture')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index cf00adb..931caac 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -94,12 +94,12 @@ MX.Movements = function (cam) {
 					moveRight = true
 					break
 
-				// case 37: // left
+				case 37: // left
 				case 81: // q
 					turnLeft = true
 					break
 						
-				// case 39: // right
+				case 39: // right
 				case 69: // e
 					turnRight = true
 					break
@@ -200,12 +200,12 @@ MX.Movements = function (cam) {
 					moveRight = false
 					break
 
-				// case 37: // left
+				case 37: // left
 				case 81: // q
 					turnLeft = false
 					break
 						
-				// case 39: // right
+				case 39: // right
 				case 69: // e
 					turnRight = false
 					break
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
index e69de29..0c501ad 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
@@ -0,0 +1,49 @@
+Map.UI = Map.UI || {}
+Map.UI.Ortho = function(map){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: function(e, cursor){
+			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+      base.tools[currentTool].down(e, cursor)
+		},
+		move: function(e, cursor){
+			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+      base.tools[currentTool].move(e, cursor)
+		},
+		drag: function(e, cursor){
+			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
+			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
+      base.tools[currentTool].drag(e, cursor)
+		},
+		up: function(e, cursor, new_cursor){
+			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+      base.tools[currentTool].up(e, cursor, new_cursor)
+		}
+	})
+	
+	var currentTool = "polyline"
+	base.setTool = function(s){
+	  currentTool = s
+	}
+	base.tools = {
+	  polyline: new PolylineTool,
+	  position: new PositionTool,
+	}
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
+	}
+}
diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
index 2f24ae5..2f593e8 100644
--- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js
@@ -72,7 +72,7 @@ Sculpture.types.base = Fiber.extend(function(base){
 	    else {
 	      this.mx.el.classList.add("backface-visible")
 	      this.mx.el.classList.remove("backface-hidden")
-	      this.mx.rotationY = PI/2
+	      this.mx.rotationY = quantize(cam.rotationY, PI/2)
 	    }
 	    Sculpture.resize.move_dots()
     },
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 2c600f5..49e0308 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -41,6 +41,7 @@ body {
 <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js"></script>
 <script src="/assets/javascripts/vendor/polyfill.js"></script>
 <script src="/assets/javascripts/vendor/tube.js"></script>
 <script src="/assets/javascripts/mx/mx.js"></script>
@@ -66,92 +67,87 @@ app.tube = new Tube ()
 app.on = function(){ app.tube.on.apply(app.tube, arguments) }
 app.off = function(){	app.tube.off.apply(app.tube, arguments) }
 
-Map.UI = Map.UI || {}
-Map.UI.Ortho = function(map){
-
-	var base = this
-
-	base.creating = base.dragging = base.resizing = false
+var MapTool = Fiber.extend(function(base){
+	var exports = {
+	  down: function(e, cursor){},
+	  move: function(e, cursor){},
+	  drag: function(e, cursor){},
+	  up: function(e, cursor, new_cursor){},
+  }
+  return exports
+})
 
-	base.mouse = new mouse({
-		el: map.el,
-		down: function(e, cursor){
-			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+var PositionTool = MapTool.extend(function(base){
+	var exports = {
+	  down: function(e, cursor){
+      cursor.quantize(1/map.zoom)
+      map.center.a = cursor.x.a
+      map.center.b = -cursor.y.a
+      cursor.x.b = cursor.x.a
+      cursor.y.b = cursor.y.a
+      map.ui.mouse.down = false
+	  },
+  }
+  return exports
+})
 
-      if (e.ctrlKey || e.which === 3) {
-        if (placing) {
-          // close polyline or cancel
-          placing = false
-					add_mx_polyline(points)
-          return
+var PolylineTool = MapTool.extend(function (base) {
+  var exports = {}
+  exports.down = function(e, cursor){
+
+    // rightclick?
+    if (e.ctrlKey || e.which === 3) {
+      e.preventDefault()
+      e.stopPropagation()
+      if (placing) {
+        // close polyline or cancel
+        placing = false
+        if (points.length > 2) {
+          add_mx_polyline(points)
+        }
+        else {
+          points.length = 0
         }
-        cursor.quantize(1/map.zoom)
-        map.center.a = cursor.x.a
-        map.center.b = -cursor.y.a
-        cursor.x.b = cursor.x.a
-        cursor.y.b = cursor.y.a
-        base.mouse.down = false
-        e.preventDefault()
-        e.stopPropagation()
         return
       }
+      map.ui.tools.position.down(e, cursor)
+      return
+    }
 
-			// compare to initial point
-			var p = new vec2( cursor.x.a, cursor.y.a )
-			if (placing) {
-				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
-					points.push( points[0].clone() )
-					placing = false
-					add_mx_polyline(points)
-				}
-				else {
-					points.push( p )
-          mx_points.push( add_mx_point(p) )
-				}
-			}
-			else {
-				placing = true
-				points = []
-				points.push( p )
+    // compare to initial point
+    var p = new vec2( cursor.x.a, cursor.y.a )
+    if (placing) {
+      if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
+        points.push( points[0].clone() )
+        placing = false
+        add_mx_polyline(points)
+      }
+      else {
+        points.push( p )
         mx_points.push( add_mx_point(p) )
-			}
-		},
-		move: function(e, cursor){
-			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-
-			last_point = new vec2( cursor.x.a, cursor.y.a )
-			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
-				document.body.style.cursor = "pointer"
-				last_point.assign(points[0])
-				cursor.x.a = cursor.x.b = last_point.a
-				cursor.y.a = cursor.y.b = last_point.b
-			}
-			else {
-				document.body.style.cursor = "crosshair"
-			}
-		},
-		drag: function(e, cursor){
-			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
-			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
-		},
-		up: function(e, cursor, new_cursor){
-			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-		}
-	})
-
-	base.wheel = new wheel({
-		el: map.el,
-		update: mousewheel,
-	})
-
-	function mousewheel (e, deltaY, deltaX){
-		map.set_zoom(map.zoom_exponent - deltaY/20)
-	}
-}
-
+      }
+    }
+    else {
+      placing = true
+      points = []
+      points.push( p )
+      mx_points.push( add_mx_point(p) )
+    }
+  }
+  exports.move = function(e, cursor){
+    last_point = new vec2( cursor.x.a, cursor.y.a )
+    if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
+      document.body.style.cursor = "pointer"
+      last_point.assign(points[0])
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  }
+  return exports
+})
 
 var scene, map, controls
 
@@ -302,8 +298,8 @@ function build () {
   floorplan.el.addEventListener("contextmenu", function(e){
     e.preventDefault()
     var offset = offsetFromPoint(e, this)
-    var x = (offset.left - 0.5) * floorplan.width
-    var z = (offset.top - 0.5) * floorplan.height
+    var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
+    var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
     controls.opt.center.x = -x
     controls.opt.center.y = 0
     controls.opt.center.z = -z
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 37bf620..a41eb8b 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -1,3 +1,4 @@
+<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
 <style type="text/css">
 html,body{width:100%;height:100%;margin:0;padding:0;}
 body {
@@ -14,118 +15,256 @@ body {
 	left:50%;
 	top:0px
 }
-#hud {
-	white-space: pre;
+.hud {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  background: white;
 }
+.ortho-hud {
+  left: 50%;
+  border-left: 1px solid black;
+}
+#url { width: 300px }
+.hud span { color: #888; cursor: pointer; }
+.hud span.active { color: #000; }
 </style>
 
 <div id="perspective"></div>
 <div id="orthographic"></div>
 
-<div id="hud"></div>
+<div class="hud persp-hud">
+  <input type="text" id="url" placeholder="paste an image URL here!">
+  <span class="ion-ionic active" data-role="orbit-mode"></span>
+  <span class="ion-archive" data-role="keyboard-mode"></span>
+</div>
+
+<div class="hud ortho-hud">
+  <span class="ion-navigate active" data-role="arrow-mode"></span>
+  <span class="ion-ios-pulse active" data-role="polyline-mode"></span>
+  <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
+</div>
 
 <script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/defaults.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js"></script>
 <script src="/assets/javascripts/vendor/polyfill.js"></script>
 <script src="/assets/javascripts/vendor/tube.js"></script>
 <script src="/assets/javascripts/mx/mx.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.movements.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.image.js"></script>
 <script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/coords.js"></script>
 <script src="/assets/javascripts/rectangles/util/mouse.js"></script>
 <script src="/assets/javascripts/rectangles/util/wheel.js"></script>
-<script src="/assets/javascripts/rectangles/util/coords.js"></script>
 <script src="/assets/javascripts/rectangles/models/vec2.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>
-<script src="/assets/javascripts/rectangles/models/rect.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/ui_ortho.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
 
 <script>
-Map.UI = Map.UI || {}
-Map.UI.Ortho = function(map){
+var app = window.app || {}
+app.tube = new Tube ()
+app.on = function(){ app.tube.on.apply(app.tube, arguments) }
+app.off = function(){	app.tube.off.apply(app.tube, arguments) }
 
-	var base = this
+var MapTool = Fiber.extend(function(base){
+	var exports = {
+	  down: function(e, cursor){},
+	  move: function(e, cursor){},
+	  drag: function(e, cursor){},
+	  up: function(e, cursor, new_cursor){},
+  }
+  return exports
+})
 
-	base.creating = base.dragging = base.resizing = false
+var PositionTool = MapTool.extend(function(base){
+	var exports = {
+	  down: function(e, cursor){
+      cursor.quantize(1/map.zoom)
+      map.center.a = cursor.x.a
+      map.center.b = -cursor.y.a
+      cursor.x.b = cursor.x.a
+      cursor.y.b = cursor.y.a
+      map.ui.mouse.down = false
+	  },
+  }
+  return exports
+})
 
-	base.mouse = new mouse({
-		el: map.el,
-		down: function(e, cursor){
-			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+var PolylineTool = MapTool.extend(function (base) {
+  var exports = {}
+  exports.down = function(e, cursor){
 
-      if (e.ctrlKey || e.which === 3) {
-        if (placing) {
-          // close polyline or cancel
-          return
+    // rightclick?
+    if (e.ctrlKey || e.which === 3) {
+      e.preventDefault()
+      e.stopPropagation()
+      if (placing) {
+        // close polyline or cancel
+        placing = false
+        if (line.points.length > 2) {
+          line.build()
+          line.closed = false
+        }
+        else {
+          line.reset()
         }
-        e.preventDefault()
-        e.stopPropagation()
-        cursor.quantize(1/map.zoom)
-        map.center.a = cursor.x.a
-        map.center.b = -cursor.y.a
-        cursor.x.b = cursor.x.a
-        cursor.y.b = cursor.y.a
-        base.mouse.down = false
         return
       }
+      map.ui.tools.position.down(e, cursor)
+      return
+    }
 
-			// compare to initial point
-			var p = new vec2( cursor.x.a, cursor.y.a )
-			if (placing) {
-				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
-					points.push( points[0].clone() )
-					placing = false
-				}
-				else {
-					points.push( p )
-				}
-			}
-			else {
-				placing = true
-				points = []
-				points.push( p )
-			}
-		},
-		move: function(e, cursor){
-			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-			last_point = new vec2( cursor.x.a, cursor.y.a )
-			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
-				document.body.style.cursor = "pointer"
-				last_point.assign(points[0])
-				cursor.x.a = cursor.x.b = last_point.a
-				cursor.y.a = cursor.y.b = last_point.b
-			}
-			else {
-				document.body.style.cursor = "crosshair"
-			}
-		},
-		drag: function(e, cursor){
-			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
-			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
-		},
-		up: function(e, cursor, new_cursor){
-			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-		}
-	})
+    // compare to initial point
+    var p = new vec2( cursor.x.a, cursor.y.a )
+    if (placing) {
+      if (line.points.length > 2 && line.points[0].distanceTo( p ) < 10/map.zoom) {
+        line.points.push( line.points[0].clone() )
+        line.build()
+        placing = false
+      }
+      else {
+        line.add(p)
+      }
+    }
+    else {
+      placing = true
+      line = new Polyline ()
+      line.add(p)
+    }
+  }
+  exports.move = function(e, cursor){
+    last_point = new vec2( cursor.x.a, cursor.y.a )
+    if (placing && line.points.length > 1 && line.points[0].distanceTo( last_point ) < 10/map.zoom) {
+      document.body.style.cursor = "pointer"
+      last_point.assign(line.points[0])
+      cursor.x.a = cursor.x.b = last_point.a
+      cursor.y.a = cursor.y.b = last_point.b
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  }
+  return exports
+})
 
-	base.wheel = new wheel({
-		el: map.el,
-		update: mousewheel,
-	})
+var Polyline = Fiber.extend(function(base){
+	var exports = {}
+	
+	exports.init = function(){
+    this.points = []
+    this.mx_points = []
+    this.closed = false
+	}
 
-	function mousewheel (e, deltaY, deltaX){
-		map.set_zoom(map.zoom_exponent - deltaY/20)
+	exports.add = function(p){
+    this.points.push( p )
+    this.mx_points.push( new MX.Point(p) )
 	}
-}
+
+  exports.draw = function(ctx){
+    var points = this.points
+    if (! points.length) return
+    if (points.length == 1) {
+      ctx.fillStyle = "#f80"
+      map.draw.dot_at(this.points[0].a, points[0].b, 5)
+    }
+    if (points.length > 1) {
+      ctx.fillStyle = "rgba(255,255,0,0.1)"
+      ctx.strokeStyle = "#f80"
+      ctx.lineWidth = 2 / map.zoom
+      ctx.beginPath()
+      ctx.moveTo(points[0].a, points[0].b)
+      points.forEach(function(point, i){
+        i && ctx.lineTo(point.a, point.b)
+      })
+      ctx.stroke()
+      if (! placing || this.closed) {
+        ctx.fill()
+      }
+    }
+  }
+  exports.draw_line = function (ctx, p){
+    var last = this.points[this.points.length-1]
+    ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
+    ctx.beginPath()
+    ctx.moveTo(last.a, last.b)
+    ctx.lineTo(p.a, p.b)
+    ctx.stroke()
+  }
+  exports.build = function(){
+    this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) })
+    this.mx = new MX.Polyline(this)
+    this.closed = true
+    shapes.push(this)
+  }
+  exports.reset = function(){
+    this.mx_points.forEach(function(mx){ scene.remove(mx) })
+    this.points.length = 0
+    this.mx_points.length = 0
+  }
+  return exports
+})
+
+MX.Polyline = MX.Object3D.extend({
+  init: function(polyline){
+    var faces = [], points = polyline.points
+    for (var i = 1; i < points.length; i++) {
+      var head = points[i-1]
+      var tail = points[i]
+      face = this.add_face(head, tail)
+      faces.push(face)
+    }
+  },
+
+  add_face: function (head, tail){
+    var mx = new MX.Object3D()
+    var mid_x = (head.a + tail.a)
+    var mid_z = (head.b + tail.b)
+    var len = head.distanceTo( tail )
+    var angle = atan2( head.b - tail.b, head.a - tail.a )
+    mx.move({
+      x: mid_x / 2,
+      y: wall_height/2 + 1,
+      z: mid_z / 2,
+      width: ceil(len),
+      height: wall_height,
+      rotationY: angle
+    })
+    var hue = abs(round( angle / PI * 90 + 300))
+    mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
+    scene.add(mx)
+    return mx
+  }
+})
+
+MX.Point = MX.Object3D.extend({
+  init: function(p){
+    this.updateChildren = false
+    this.move({
+      x: p.a,
+      y: 11,
+      z: p.b,
+      width: 20,
+      height: 20,
+      rotationX: PI/2,
+    })
+    this.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
+    this.el.style.backfaceVisibility = "visible"
+    this.el.style.borderRadius = "50%"
+    scene.add(this)
+  }
+})
 
 
 var scene, map, controls
@@ -142,43 +281,76 @@ $(window).resize(function(){
   map.canvas.width = map.dimensions.a = window.innerWidth/2
 })
 
-
+var wall_height = 180
 var placing = false
-var points = []
+var line
 var shapes = []
 var ctx = map.draw.ctx
 var last_point
 
-function polyline (points, finished) {
-  if (! points) return
-  if (points.length == 1) {
-    ctx.fillStyle = "#f80"
-    map.draw.dot_at(points[0].a, points[0].b, 5)
+$("#url").on("input", function(){
+  floorplan.load({ src: this.value })
+})
+
+
+var Toolbar = Fiber.extend(function(base){
+  var exports = {}
+  exports.init = function(rapper){
+    this.rapper = (typeof rapper == "string") ? $(rapper)[0] : rapper
+    this.tools = {}
   }
-  if (points.length > 1) {
-    ctx.fillStyle = "#ff0"
-    ctx.strokeStyle = "#f80"
-    ctx.lineWidth = 2 / map.zoom
-    ctx.beginPath()
-    ctx.moveTo(points[0].a, points[0].b)
-    points.forEach(function(point, i){
-      i && ctx.lineTo(point.a, point.b)
+  exports.add = function(role, fn){
+    this.tools[role] = fn
+    $("[data-role=" + role + "]", self.rapper).click(function(){
+      $(".active", self.rapper).removeClass('active')
+      $(this).addClass('active')
+      fn()
     })
-		ctx.stroke()
-    if (! placing || finished) {
-      ctx.fill()
-    }
   }
-}
+  return exports
+})
+
+var PerspectiveToolbar = new Toolbar (".persp-hud")
+PerspectiveToolbar.add("orbit-mode", function(){
+  controls.toggle(true)
+  movements.lock()
+})
+PerspectiveToolbar.add("keyboard-mode", function(){
+  controls.toggle(false)
+  movements.unlock()
+  movements.gravity(true)
+  cam.rotationX = 0
+  cam.rotationY = -cam.rotationY
+  cam.x = 0
+  cam.y = viewHeight + 100
+  cam.z = 0
+})
+
+var OrthographicToolbar = new Toolbar (".ortho-hud")
+OrthographicToolbar.add("", function(){
+})
 
 document.addEventListener('DOMContentLoaded', build)
 function build () {
 	scene = new MX.Scene().addTo("#perspective")
 	scene.camera.radius = 20
 
+  viewHeight = 100
+
 	scene.width = window.innerWidth/2
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
+	
+	cam = scene.camera
+	movements = new MX.Movements(cam, viewHeight)
+	movements.init()
+	movements.lock()
+	movements.velocity(8)
+	app.on("move", function(pos){
+	  cam.x = pos.x
+	  cam.y = pos.y
+	  cam.z = pos.z
+	})
 
   floorplan = new MX.Image({
     src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
@@ -188,6 +360,17 @@ function build () {
   })
   scene.add(floorplan)
   
+  // recenter perspective view by rightclicking map
+  floorplan.el.addEventListener("contextmenu", function(e){
+    e.preventDefault()
+    var offset = offsetFromPoint(e, this)
+    var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
+    var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
+    controls.opt.center.x = -x
+    controls.opt.center.y = 0
+    controls.opt.center.z = -z
+  }, true)
+
 	scene.update()
 
 	controls = new MX.OrbitCamera({
@@ -201,10 +384,16 @@ function build () {
 
 	animate(0)
 }
-function animate(time){
+var last_t = 0
+function animate(t){
   requestAnimationFrame(animate)
-  map.update(time)
 
+  var dt = t - last_t
+  last_t = t
+
+  map.update(t)
+
+  movements.update(dt)
 	controls.update()
   scene.update()
 
@@ -215,18 +404,15 @@ function animate(time){
 
 	map.draw.coords()
 
-  polyline(points)
-  if (placing && last_point) {
-    ctx.strokeStyle = "#f80"
-    ctx.lineWidth = 2 / map.zoom
-    ctx.beginPath()
-    ctx.moveTo(points[points.length-1].a, points[points.length-1].b)
-    ctx.lineTo(last_point.a, last_point.b)
-    ctx.stroke()
+  if (line) {
+    line.draw(map.draw.ctx)
+    if (placing && last_point) {
+      line.draw_line( map.draw.ctx, last_point )
+    }
   }
 
   shapes.forEach(function(shape){
-    polyline(shape.points, true)
+    shape.draw(map.draw.ctx)
   })
 
   ctx.strokeStyle = "#f00";
-- 
cgit v1.2.3-70-g09d2