2 files changed, 73 insertions, 137 deletions

diff --git a/js/panels/Color/colortoolbar.reel/colortoolbar.js b/js/panels/Color/colortoolbar.reel/colortoolbar.js
index 19fe7b85..6b8e476b 100644
--- a/js/panels/Color/colortoolbar.reel/colortoolbar.js
+++ b/js/panels/Color/colortoolbar.reel/colortoolbar.js
@@ -20,7 +20,7 @@ exports.ColorToolbar = Montage.create(Component, {
     //Storing stroke (stores color in mode use to select color)
     _stroke: {
         enumerable: false,
-        value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)'}, webGlColor: [0, 0, 0, 1]}
+        value: {colorMode: 'rgb', color: {r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode:'rgb', wasSetByCode: true, type: 'change'}, webGlColor: [0, 0, 0, 1]}
     },
     ////////////////////////////////////////////////////////////////////
     //
@@ -39,7 +39,7 @@ exports.ColorToolbar = Montage.create(Component, {
     //Storing fill (stores color in mode use to select color)
     _fill: {
         enumerable: false,
-        value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)'}, webGlColor: [1, 1, 1, 1]}
+        value: {colorMode: 'rgb', color: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode:'rgb', wasSetByCode: true, type: 'change'}, webGlColor: [1, 1, 1, 1]}
     },
     ////////////////////////////////////////////////////////////////////
     //
@@ -86,8 +86,8 @@ exports.ColorToolbar = Montage.create(Component, {
                 this.application.ninja.colorController.addButton('chip', this.fill_btn);
             this.application.ninja.colorController.addButton('chip', this.stroke_btn);
             //
-            this.fill_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'});
-            this.stroke_btn.color('rgb', {wasSetByCode: false, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'});
+            this.fill_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 255, b: 255}, css: 'rgb(255,255,255)'});
+            this.stroke_btn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 0, g: 0, b: 0}, css: 'rgb(0,0,0)'});
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -95,76 +95,38 @@ exports.ColorToolbar = Montage.create(Component, {
     didDraw: {
         enumerable: false,
         value: function() {
-                //
+
                 this.fill_btn.addEventListener('change', function (e) {
-                        //
-                        var temp;
-                //
-                this.fill = e._event;
-                //
-                if (e._event.color && e._event.color.l) {
-                        temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100);
-                        temp.a = e._event.color.a;
-                } else if (e._event.color && e._event.color.r){
-                        temp = e._event.color;
-                        temp.a = e._event.color.a;
-                } else {
-                        temp = null;
-                }
-                //WebGL uses array
-                if (temp) {
-                        this.fill.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a];
-                } else {
-                        this.fill.webGlColor = null;
-                }
-                //
+                this.fill = e._event;
+                this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
                 this.application.ninja.colorController.colorModel.input = 'fill';
-                //      
-                var color = e._event.color;
+
+                var color = e._event.color;
                 if (e._event.colorMode !== 'nocolor' && color) {
                         color.wasSetByCode = false;
                         color.type = 'change';
+                        color.mode = e._event.colorMode;
                         this.application.ninja.colorController.colorModel[e._event.colorMode] = color;
                 } else {
                         this.application.ninja.colorController.colorModel.applyNoColor();
                 }
-                //
                 this.application.ninja.colorController.colorModel.input = 'chip';
                 }.bind(this));
-                //
-                this.stroke_btn.addEventListener('change', function (e) {
-                        //
-                        var temp;
-                //
+
+            this.stroke_btn.addEventListener('change', function (e) {
                 this.stroke = e._event;
-                //
-                if (e._event.color && e._event.color.l) {
-                        temp = this.application.ninja.colorController.colorModel.hslToRgb(e._event.color.h/360, e._event.color.s/100, e._event.color.l/100);
-                        temp.a = e._event.color.a;
-                } else if (e._event.color && e._event.color.r){
-                        temp = e._event.color;
-                        temp.a = e._event.color.a;
-                } else {
-                        temp = null;
-                }
-                //WebGL uses array
-                if (temp) {
-                        this.stroke.webGlColor = [temp.r/255, temp.g/255, temp.b/255, temp.a];
-                } else {
-                        this.stroke.webGlColor = null;
-                }
-                //
+                this.stroke.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
                 this.application.ninja.colorController.colorModel.input = 'stroke';
-                //      
+
                 var color = e._event.color;
                 if (e._event.colorMode !== 'nocolor' && color) {
                         color.wasSetByCode = false;
                         color.type = 'change';
+                    color.mode = e._event.colorMode;
                         this.application.ninja.colorController.colorModel[e._event.colorMode] = color;
                         } else {
                                 this.application.ninja.colorController.colorModel.applyNoColor();
                         }
-                        //
                 this.application.ninja.colorController.colorModel.input = 'chip';
             }.bind(this));
         }
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 3cedee6d..0088447a 100644
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -97,10 +97,24 @@ exports.Content = Montage.create(Component, {
         value: function(event) {
 //            console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
             if(event.detail.source && event.detail.source !== "pi") {
-                this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left"));
-                this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top"));
+                // TODO - This should only update the properties that were changed.
+                var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0];
+                this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
+                this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
+                this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
+                this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
+
+                if(this.threeD.inGlobalMode)
+                {
+                    this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
+                    this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D");
+                    this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D");
+                    this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle");
+                    this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle");
+                    this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle");
             }
         }
+        }
     },
 
     handleSelectionChange: {
@@ -141,7 +155,8 @@ exports.Content = Montage.create(Component, {
 
     displayElementProperties: {
         value: function (el) {
-            var customPI;
+            var customPI,
+                currentValue;
 
             this.elementName = el.elementModel.selection;
             this.elementId.value = el.getAttribute("id") || "";
@@ -180,90 +195,52 @@ exports.Content = Montage.create(Component, {
                 for(var j = 0, fields; fields = customSec.Section[j]; j++) {
                     for(var k = 0, control; control = fields[k]; k++) {
 
-                        if(control.prop !== "border-color" && control.prop !== "background-color") {
-                            var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
+                        if(control.type !== "color") {
+                            currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
                             if(currentValue === null)
                             {
                                 currentValue = control.defaultValue;
                             }
                             this.customSections[i].content.controls[control.id] = currentValue;
                         }
+                        else
+                        {
+                            currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator);
+                            if(control.prop === "border")
+