add measurement stuff to media editor

9 files changed, 138 insertions, 98 deletions

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 191088f..3b7d3e2 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -149,7 +149,8 @@ MX.Movements = function (cam) {
 					case 32: // space
 						moveUp = moveDown = false
 						break
-					
+
+/*					
 					case 48: // 0
 						cam.rotationX = 0
 						cam.rotationY = 0
@@ -157,6 +158,7 @@ MX.Movements = function (cam) {
 						cam.y = viewHeight
 						cam.z = 0
 						break
+*/
 				}
 			})
 			
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
index 7202ce0..66e0faf 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
@@ -66,6 +66,10 @@ Scenery.types.base = Fiber.extend(function(base){
 			this.center = this.wall.center()
 		},
 		
+		set_scale: function(scale){
+			this.scale = this.mx.scale = this.mx.ops.scale = scale || 1.0
+		},
+		
 		recenter: function(){
 			this.mx.move({
 				x: this.center.a,
diff --git a/public/assets/javascripts/rectangles/util/measurement.js b/public/assets/javascripts/rectangles/util/measurement.js
new file mode 100644
index 0000000..d6a0b35
--- /dev/null
+++ b/public/assets/javascripts/rectangles/util/measurement.js
@@ -0,0 +1,82 @@
+$.fn.resetUnitVal = function(){
+	this.each(function(){
+		var n = $(this).data("px")
+		$(this).unitVal(n)
+	});
+}
+
+$.fn.unitVal = function(n){
+	var s
+	if (typeof n === "undefined") {
+		s = $(this).val()
+		n = stringToMeasurement( s )
+		if (! n || isNaN(n)) {
+			n = $(this).data("px")
+		}
+	}
+	s = measurementToString( n )
+	$(this).val( s ).data("px", n)
+	return n
+}
+
+function measurementToString( n ) {
+	var s, ft, inch
+	switch (app.units) {
+		case 'm':
+			s = round(n/36 * 0.3048 * 100) / 100 + " m"
+			break
+		case 'ft':
+			ft = floor(n / 36)
+			inch = abs(round((n % 36) / 3))
+			s = ft + "'"
+			if (inch > 0) {
+				s += " " + inch + '"'
+			}
+			break
+		case 'px':
+		default:
+			s = round(n) + " px"
+			break
+	}
+	return s
+}
+function stringToMeasurement( s ) {
+	var ft, inch, ft_in, type
+	if (! s.match(/[0-9]/)) {
+		return NaN
+	}
+	if (s.indexOf("'") !== -1 || s.indexOf('"') !== -1 || s.indexOf('ft') !== -1) {
+		ft_in = s.match(/[0-9.]+/g)
+		if (ft_in.length >= 2) {
+			ft = parseFloat( ft_in[0] )
+			inch = parseFloat( ft_in[1] )
+		}
+		else if (ft_in.length == 1) {
+			if (s.indexOf('"') !== -1) {
+				ft = 0
+				inch = parseFloat( ft_in[0] )
+			}
+			else {
+				ft = parseFloat( ft_in[0] )
+				inch = 0
+			}
+		}
+		else {
+			ft = inch = 0
+		}
+		n = ft * 36 + inch * 3
+	}
+	else if (s.indexOf("m") !== -1) {
+		n = parseFloat(s.match(/[0-9.]+/)) * 36 / 0.3048
+	}
+	else if (s.indexOf("px") !== -1) {
+		n = parseFloat(s.match(/[0-9.]+/))
+	}
+	else {
+		n = abs( stringToMeasurement( s + app.units ) )
+	}
+	if (s.indexOf('-') !== -1) {
+		n *= -1
+	}
+	return n
+}
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 56f1338..2fffdba 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -96,86 +96,3 @@ var BuilderInfo = View.extend({
 	},
 
 })
-
-$.fn.resetUnitVal = function(){
-	this.each(function(){
-		var n = $(this).data("px")
-		$(this).unitVal(n)
-	});
-}
-
-$.fn.unitVal = function(n){
-	var s
-	if (typeof n === "undefined") {
-		s = $(this).val()
-		n = stringToMeasurement( s )
-		if (! n || isNaN(n)) {
-			n = $(this).data("px")
-		}
-	}
-	s = measurementToString( n )
-	$(this).val( s ).data("px", n)
-	return n
-}
-
-function measurementToString( n ) {
-	var s, ft, inch
-	switch (app.units) {
-		case 'm':
-			s = round(n/36 * 0.3048 * 100) / 100 + " m"
-			break
-		case 'ft':
-			ft = floor(n / 36)
-			inch = abs(round((n % 36) / 3))
-			s = ft + "'"
-			if (inch > 0) {
-				s += " " + inch + '"'
-			}
-			break
-		case 'px':
-		default:
-			s = round(n) + " px"
-			break
-	}
-	return s
-}
-function stringToMeasurement( s ) {
-	var ft, inch, ft_in, type
-	if (! s.match(/[0-9]/)) {
-		return NaN
-	}
-	if (s.indexOf("'") !== -1 || s.indexOf('"') !== -1 || s.indexOf('ft') !== -1) {
-		ft_in = s.match(/[0-9.]+/g)
-		if (ft_in.length >= 2) {
-			ft = parseFloat( ft_in[0] )
-			inch = parseFloat( ft_in[1] )
-		}
-		else if (ft_in.length == 1) {
-			if (s.indexOf('"') !== -1) {
-				ft = 0
-				inch = parseFloat( ft_in[0] )
-			}
-			else {
-				ft = parseFloat( ft_in[0] )
-				inch = 0
-			}
-		}
-		else {
-			ft = inch = 0
-		}
-		n = ft * 36 + inch * 3
-	}
-	else if (s.indexOf("m") !== -1) {
-		n = parseFloat(s.match(/[0-9.]+/)) * 36 / 0.3048
-	}
-	else if (s.indexOf("px") !== -1) {
-		n = parseFloat(s.match(/[0-9.]+/))
-	}
-	else {
-		n = abs( stringToMeasurement( s + app.units ) )
-	}
-	if (s.indexOf('-') !== -1) {
-		n *= -1
-	}
-	return n
-}
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index cd8fb63..b9eb8fc 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -11,6 +11,9 @@ var MediaEditor = FormView.extend({
 		"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",
 	},
 	
@@ -22,8 +25,8 @@ var MediaEditor = FormView.extend({
 		this.$description = this.$("[name=description]")
 
 		// image fields
-		this.$widthDimension = this.$("[name=width]")
-		this.$heightDimension = this.$("[name=height]")
+		this.$width = this.$("[name=width]")
+		this.$height = this.$("[name=height]")
 		this.$units = this.$("[name=units]")
 		
 		// video fields
@@ -55,16 +58,14 @@ var MediaEditor = FormView.extend({
 		
 		this.$name.val(media.title)
 		this.$description.val(media.description)
+		this.setDimensions()
+		this.$units.val( "ft" )
 		
 		switch (media.type) {
 			case "image":
 				this.$(".image").show()
 				this.$(".video").hide()
-
-				this.$widthDimension.val( Number(media.widthDimension) || "" )
-				this.$heightDimension.val( Number(media.heightDimension) || "" )
-				this.$units.val( media.units || "cm" )
-				
+								
 				break
 
 			case "youtube":
@@ -113,6 +114,25 @@ var MediaEditor = FormView.extend({
 		this.scenery.mute(checked)
 	},
 
+	setDimensions: function(){
+		this.$width.unitVal( Number(this.scenery.dimensions.a * this.scenery.scale) || "" )
+		this.$height.unitVal( Number(this.scenery.dimensions.b * this.scenery.scale) || "" )
+	},
+	changeWidth: function(e){
+		e.stopPropagation()
+		this.scenery.set_scale( this.$width.unitVal() / this.scenery.dimensions.a )
+		this.setDimensions()
+	},
+	changeHeight: function(e){
+		e.stopPropagation()
+		this.scenery.set_scale( this.$height.unitVal() / this.scenery.dimensions.b )
+		this.setDimensions()
+	},
+	changeUnits: function(){
+		app.units = this.$units.val()
+		this.$('.units').resetUnitVal()
+	},
+
 	bind: function(scenery){
 		this.scenery = scenery
 		this.scenery.mx.bound = true
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 1863add..8508cf7 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1295,6 +1295,13 @@ input[type="range"]::-webkit-slider-thumb {
 	top: 0px;
 }
 
+#mediaEditor .setting.number label {
+	width: 40px;
+}
+#mediaEditor .setting.number [type=text] {
+	width: 140px;
+}
+
 .playButton,.muteButton {
 	color: white;
 	background: black;
diff --git a/test/09-test-undo.js b/test/09-test-undo.js
index 17998a9..f774c04 100644
--- a/test/09-test-undo.js
+++ b/test/09-test-undo.js
@@ -1,5 +1,6 @@
 var assert = require("assert")
 var UndoStack = require("../public/assets/javascripts/rectangles/util/undo.js")
+UndoStack.debug = false
 
 describe('undo', function(){
   
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 5db1fb2..7f8f299 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -34,13 +34,19 @@
 		<input type="range" min="0" max="1" value="0" step="0.01" name="keyframe" id="video-keyframe">
 	</div>
 
-	<div class="image setting">
-		Dimensions<br>
-		<input type="text" name="width" placeholder="width" class="number">
-		<input type="text" name="height" placeholder="height" class="number">
-		<select name="units">
-			<option value="inch">inch</option>
-			<option value="cm">cm</option>
+	<div class="setting number">
+		<label for="scenery-width">width</label>
+		<input type="text" class="units" name="width" id="scenery-width">
+	</div>
+	<div class="setting number">
+		<label for="scenery-height">height</label>
+		<input type="text" class="units" name="height" id="scenery-height">
+	</div>
+	<div class="setting number">
+		<select id="builder-units" name="units">
+			<option value="px">pixels</option>
+			<option value="ft">foot</option>
+			<option value="m">meter</option>
 		</select>
 	</div>
 
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index b63d1bf..087c0d7 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -23,6 +23,7 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/colors.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/debug.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/permissions.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/util/measurement.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/sort.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/uid.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/util/wheel.js"></script>