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

4 files changed, 99 insertions, 11 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js
index 1d975ec..a0f9283 100644
--- a/public/assets/javascripts/mx/primitives/mx.text.js
+++ b/public/assets/javascripts/mx/primitives/mx.text.js
@@ -38,16 +38,18 @@ MX.Text = MX.Object3D.extend({
   
   load: function(ops){
     var media = ops.media
-    if (media.color) this.el.style.color = media.color;
     if (media.font) this.setFont(media.font)
 
     this.setText( media.description )
   },
   
   setFont: function(font){
+    if (! font.color || font.color[0] == "#") { font.color = [0,0,0] }
+
     this.inner.style.fontFamily = "'" + font.family + "',sans-serif"
     this.el.style.fontSize = (2 * font.size) + "pt"
     this.el.style.textAlign = font.align
+    this.el.style.color = rgb_string(font.color)
   },
   
   setText: function(text){
diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js
index 0c5463e..9ab2623 100644
--- a/public/assets/javascripts/ui/editor/ColorControl.js
+++ b/public/assets/javascripts/ui/editor/ColorControl.js
@@ -28,8 +28,8 @@ var ColorControl = View.extend({
     this.parent = opt.parent
 
     this.colorPicker = new LabColorPicker(this, 155, 155)
-    this.$("#color-picker").append( this.colorPicker.canvas )
-    this.$("#color-picker").append( this.colorPicker.cursor )
+    this.$(".color-picker").append( this.colorPicker.canvas )
+    this.$(".color-picker").append( this.colorPicker.cursor )
     this.$(".slider").append( this.colorPicker.brightness )
     
     this.$swatches = this.$(".swatch")
@@ -85,7 +85,7 @@ var ColorControl = View.extend({
     this.toggle(false)
   },
   
-  pick: function(rgb, Lab){
+  pickColor: function(rgb, Lab){
     this.labColor = Lab
     this.setSwatchColor(this.mode, rgb)
     // console.log(rgb)
@@ -142,7 +142,7 @@ var ColorControl = View.extend({
   setHue: function(e){
   	var color = $(e.currentTarget).data('color')
     this.labColor = this.colorPicker.load(color)
-    this.pick(color, this.labColor)
+    this.pickColor(color, this.labColor)
   }
 
 })
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index 2949943..d897f91 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -11,25 +11,47 @@ var TextEditor = FormView.extend({
 		"change [name=font-family]": 'changeFontFamily',
 		"change [name=font-size]": 'changeFontSize',
 		"change [name=text-align]": 'changeTextAlign',
+		"click .swatch": 'showColorPicker',
+		"click [data-role=hide-color-picker]": 'hideColorPicker',
+		"click [data-role=hide-text-editor]": 'hide',
 		"input [name=text-body]": 'changeText',
 		"click [data-role=destroy-text]": "destroy",
+    "click .colors span": "setHue",
 	},
 	
 	initialize: function(opt){
 		this.parent = opt.parent
 		this.__super__.initialize.call(this)
     
-    this.$settings = this.$(".setting")
+    this.$textSettings = this.$(".text-setting")
+    this.$colorSettings = this.$(".color-setting")
     this.$noTextMessage = this.$(".no-text")
     this.$fontFamily = this.$("[name=font-family]")
     this.$fontSize = this.$("[name=font-size]")
     this.$textBody = this.$("[name=text-body]")
     this.$textAlign = this.$("[name=text-align]")
-    
+    this.$swatch = this.$(".swatch")
+
+    this.colorPicker = new LabColorPicker(this, 155, 155)
+    this.$(".color-picker").append( this.colorPicker.canvas )
+    this.$(".color-picker").append( this.colorPicker.cursor )
+    this.$(".slider").append( this.colorPicker.brightness )
+
+    this.$colors = this.$(".colors")
+    this.parent.colorControl.colors.forEach(function(color){
+    	var $swatch = $("<span>")
+    	$swatch.css("background-color","rgb(" + color + ")")
+    	$swatch.data('color', color)
+    	this.$colors.append($swatch)
+    }.bind(this))
+
+    this.$(".setting").hide()
+
     app.on("cancel-scenery", function(){
       this.createMode(true)
       $("body").toggleClass("addText", false)
     }.bind(this))
+
 	},
 
   toggle: function(state){
@@ -55,6 +77,7 @@ var TextEditor = FormView.extend({
 		if (this.scenery) {
 			this.unbind()
 		}
+		Scenery.resize.hide()
 		this.toggle(false)
 	},
 
@@ -68,7 +91,8 @@ var TextEditor = FormView.extend({
 		this.scenery = scenery
 		this.scenery.mx.bound = true
 		this.scenery.mx.el.classList.add("picked")
-	},
+		this.scenery.media.font.color = this.scenery.media.font.color || [0,0,0]
+  },
 	
 	unbind: function(){
 	  if (this.scenery) {
@@ -88,7 +112,8 @@ var TextEditor = FormView.extend({
 	},
   
   createMode: function(state){
-    this.$settings.toggle(! state)
+    this.hideColorPicker()
+    this.$textSettings.toggle(! state)
     this.$noTextMessage.toggle(!! state)
     $("body").toggleClass("addText", !! state)
   },
@@ -109,6 +134,7 @@ var TextEditor = FormView.extend({
 		this.$fontFamily.val( this.scenery.media.font.family )
 		this.$fontSize.val( this.scenery.media.font.size )
 		this.$textAlign.val( this.scenery.media.font.align )
+		this.setSwatchColor( this.scenery.media.font.color )
 
     this.createMode(false)
 
@@ -147,5 +173,65 @@ var TextEditor = FormView.extend({
     this.scenery.remove()
     this.hide()
 	},
+	
+	setSwatchColor: function(rgb){
+		this.$swatch.css("background-color", rgb_string(rgb))
+	},
+	showColorPicker: function(){
+    this.$textSettings.hide()
+    this.$colorSettings.show()
+    
+	  var color = this.scenery.media.font.color
+    this.labColor = this.colorPicker.load(color)
+    this.pickColor(color, this.labColor)
+    
+    this.$el.addClass("color-mode")
+  },
+  
+	hideColorPicker: function(e){
+	  e && e.preventDefault()
+    this.$textSettings.show()
+    this.$colorSettings.hide()
+    this.$el.removeClass("color-mode")
+	},
+
+  pickColor: function(rgb, Lab){
+    this.labColor = Lab
+    this.setSwatchColor(rgb)
+    this.scenery.setFont({ color: rgb })
+		this.tainted = true
+  },
+
+  setHue: function(e){
+  	var color = $(e.currentTarget).data('color')
+    this.labColor = this.colorPicker.load(color)
+    this.pickColor(color, this.labColor)
+  },
+  
+  initialState: null,
+  
+  begin: function(){
+    // this.initialState = this.serialize()
+  },
+  
+  serialize: function(){
+    return {
+      rgb: Walls.colors[ this.mode ]
+    }
+  },
+  
+  finalize: function(){
+    if (! this.initialState) { return }
+    UndoStack.push({
+      type: 'update-colors',
+      undo: this.initialState,
+      redo: this.serialize(),
+    })
+
+    this.initialState = null
+
+    // TODO: watch individual wall object here
+    Minotaur.watch( app.router.editorView.settings )
+  },
 
 })
diff --git a/public/assets/javascripts/ui/lib/LabColorPicker.js b/public/assets/javascripts/ui/lib/LabColorPicker.js
index 0e1563a..7ddcdd5 100644
--- a/public/assets/javascripts/ui/lib/LabColorPicker.js
+++ b/public/assets/javascripts/ui/lib/LabColorPicker.js
@@ -64,7 +64,7 @@ var LabColorPicker = function (parent, w, h) {
     var y = mix( j/hh, b_range[0], b_range[1] )
     var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round)
     this.moveCursor(i, j)
-    parent.pick( rgb, [val,x,y] )
+    parent.pickColor( rgb, [val,x,y] )
   }
   this.load = function(rgba){
     var Lab = xyz2hunterlab(rgb2xyz(rgba))
@@ -107,7 +107,7 @@ var LabColorPicker = function (parent, w, h) {
   this.updateBrightness = function(){
     parent.labColor[0] = parseFloat( $brightnessControl.val() )
     var rgb = base.setLab( parent.labColor )
-    parent.pick(rgb, parent.labColor)
+    parent.pickColor(rgb, parent.labColor)
   }
   this.setBrightness = function(Lab){
     $brightnessControl.val(Lab[0])