setting font family & size

5 files changed, 44 insertions, 10 deletions

diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js
index c779233..9ba0b4d 100644
--- a/public/assets/javascripts/defaults.js
+++ b/public/assets/javascripts/defaults.js
@@ -14,8 +14,6 @@ app.defaults = {
 }
 
 marked.setOptions({
-  gfm: true,
-  breaks: true,
   sanitize: true,
   smartypants: true,
 })
diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js
index b4089f3..8db28d0 100644
--- a/public/assets/javascripts/mx/primitives/mx.text.js
+++ b/public/assets/javascripts/mx/primitives/mx.text.js
@@ -37,11 +37,22 @@ MX.Text = MX.Object3D.extend({
   },
   
   load: function(ops){
-    if (ops.color) this.el.style.color = ops.color;
-    if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif";
-    if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px";
+    var media = ops.media
+    if (media.color) this.el.style.color = media.color;
+    if (media.font) this.setFont(media.font)
+    if (media.align) this.setAlign(media.align)
 
-    this.inner.innerHTML = marked( ops.media.description || "" )
+    this.setText( media.description )
+  },
+  
+  setAlign: function(align) {
+    this.el.style.textAlign = "align"
+  },
+    
+  setFont: function(font){
+    console.log(font)
+    this.inner.style.fontFamily = "'" + font.family + "',sans-serif"
+    this.el.style.fontSize = (2 * font.size) + "pt"
   },
   
   setText: function(text){
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js
index 20e9883..a10a332 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/text.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js
@@ -7,7 +7,7 @@ Scenery.types.text = Scenery.types.base.extend(function(base){
 	
 		init: function(opt){
 
-			opt.scale = 1
+			opt.scale = 0.5
 
 			base.init.call(this, opt)
 
@@ -49,6 +49,15 @@ Scenery.types.text = Scenery.types.base.extend(function(base){
       this.media.description = text
       this.mx.setText( text )
 		},
+		
+		setFont: function(style){
+		  for (var i in style) {
+		    if (style.hasOwnProperty(i)) {
+          this.media.font[i] = style[i]
+		    }
+		  }
+		  this.mx.setFont(this.media.font)
+		},
 
 		serialize: function(){
 			var data = base.serialize.call(this)
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index 3d3124b..c867d94 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -30,7 +30,15 @@ var TextEditor = FormView.extend({
     
     this.$el.toggleClass("active", state)
     if (state) {
-      Scenery.nextMedia = { type: 'text', width: 300, height: 150 }
+      Scenery.nextMedia = {
+        type: 'text',
+        width: 600,
+        height: 450,
+        scale: 0.5,
+        font: { family: 'Lato', size: 12 },
+        align: 'left',
+      }
+      
       this.createMode(true)
     }
   },
@@ -101,9 +109,12 @@ var TextEditor = FormView.extend({
   },
   
   changeFontFamily: function(){
+    this.scenery.setFont({ family: this.$fontFamily.val() })
   },
   
   changeFontSize: function(){
+    var size = parseInt( this.$fontSize.val() )
+    size && this.scenery.setFont({ size: size })
   },
   
   changeText: function(e){
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 02bbe6a..1c20493 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -4,9 +4,11 @@
 	margin:0;
 	padding:0;
 	outline:0;
-	font-family: 'Lato', sans-serif;
 	-webkit-font-smoothing: subpixel-antialiased;
 }
+body,textarea,input {
+	font-family: 'Lato', sans-serif;
+}
 
 *, *:before, *:after {
   moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
@@ -1597,7 +1599,10 @@ input[type="range"]::-webkit-slider-thumb {
   font-size: 12px;
   width: 100%;
   max-height: 200px;
-  max-width: 180px;
+}
+#textEditor.settings textarea {
+  max-height: none;
+  height: 290px;
 }
 
 .settings input[type="text"]:focus{