resize scenery

10 files changed, 221 insertions, 7 deletions

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>