Fixed element mediator, PI, and eye-dropper to handle different borders sides and gradients.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

5 files changed, 41 insertions, 30 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index ec0335b4..9f00604f 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -74,8 +74,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
 
     //--------------------------------------------------------------------------------------------------------
     // Routines to get/set color properties
+    // borderSide : "top", "right", "bottom", or "left"
     getColor: {
-        value: function(el, isFill) {
+        value: function(el, isFill, borderSide) {
             var colorObj,
                 color,
                 image;
@@ -87,22 +88,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                 {
                     return el.elementModel.fill;
                 }
-//                return this.application.ninja.stylesController.getElementStyle(el, "background-color");
                 //TODO: Once logic for color and gradient is established, this needs to be revised
                 color = this.getProperty(el, "background-color");
                 image = this.getProperty(el, "background-image");
             }
             else
             {
-                // TODO - Need to figure out which border side user wants
-                if(el.elementModel.stroke)
+                // Try getting border color from specific side first
+                if(borderSide)
                 {
-                    return el.elementModel.stroke;
+                    color = this.getProperty(el, "border-" + borderSide + "-color");
+                    image = this.getProperty(el, "border-" + borderSide + "-image");
+                }
+
+                // If no color was found, look up the shared border color
+                if(!color && !image)
+                {
+                    if(el.elementModel.stroke)
+                    {
+                        return el.elementModel.stroke;
+                    }
+                    color = this.getProperty(el, "border-color");
+                    image = this.getProperty(el, "border-image");
                 }
-                // TODO - Need to figure out which border side user wants
-//                return this.application.ninja.stylesController.getElementStyle(el, "border-color");
-                color = this.getProperty(el, "border-color");
-                image = this.getProperty(el, "border-image");
             }
 
             if(color || image) {
@@ -120,11 +128,15 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
             {
                 el.elementModel.fill = colorObj;
             }
-            else
+            else if(!borderSide)
             {
                 // TODO - Need to update border style and width also
                 el.elementModel.stroke = colorObj;
             }
+            else
+            {
+                // TODO - Should update specific border sides too
+            }
 
             return colorObj;
         }
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 127f73e1..d62fa1f8 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -459,13 +459,12 @@ exports.ElementMediator = Montage.create(NJComponent, {
 
     //--------------------------------------------------------------------------------------------------------
     // Routines to get/set color
-    // for now just return the bg/fill color
     getColor: {
-        value: function(el, isFill) {
+        value: function(el, isFill, borderSide) {
             if(!el.elementModel) {
                 NJUtils.makeModelFromElement(el);
             }
-            return el.elementModel.controller["getColor"](el, isFill);
+            return el.elementModel.controller["getColor"](el, isFill, borderSide);
         }
     },
 
@@ -621,16 +620,6 @@ exports.ElementMediator = Montage.create(NJComponent, {
         }
     },
 
-    getColor2: {
-        value: function(el, prop, mutator) {
-            if(!el.elementModel) {
-                NJUtils.makeModelFromElement(el);
-            }
-
-            return this.getColor(el, (prop === "background"));
-        }
-    },
-
     //--------------------------------------------------------------------------------------------------------
     // Routines to get/set 3D properties
     get3DProperty: {
diff --git a/js/models/color-model.js b/js/models/color-model.js
index 2c86422f..4189fbef 100755
--- a/js/models/color-model.js
+++ b/js/models/color-model.js
@@ -574,6 +574,9 @@ exports.ColorModel = Montage.create(Component, {
                     temp = this.hslToRgb(color.h/360, color.s/100, color.l/100);
                 } else if (color.r !== undefined) {
                     temp = color;
+                } else if (color.gradientMode) {
+                    // TODO - Need to handle gradients at some point
+                    return null;
                 }
                 temp.a = color.a;
             }
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index eb9faa8b..947d7937 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -302,13 +302,15 @@ exports.Properties = Montage.create(Component, {
                         }
                         else
                         {
-                            currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator);
                             if(control.prop === "border")
                             {
+                                // TODO - For now, always return the top border if multiple border sides
+                                currentValue = ElementsMediator.getColor(el, false, "top");
                                 this.application.ninja.colorController.colorModel.input = "stroke";
                             }
                             else if(control.prop === "background")
                             {
+                                currentValue = ElementsMediator.getColor(el, true);
                                 this.application.ninja.colorController.colorModel.input = "fill";
                             }
 
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 6e71c693..927b86cf 100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -152,10 +152,14 @@ exports.EyedropperTool = Montage.create(toolBase, {
                     {
                         color = this.application.ninja.colorController.getColorObjFromCss(c);
                     }
-                    else
+                    else if(c.mode !== "gradient")
                     {
                         color = this.application.ninja.colorController.getColorObjFromCss(c.color.css);
                     }
+                    else
+                    {
+                        color = c;
+                    }
                 }
 
                 this._updateColor(color, false);
@@ -175,7 +179,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
             if(updateColorToolBar)
             {
                 eventType = "change";
-                if (color && color.value)
+                // TODO - Color chips in toolbar doesn't support gradients yet
+                if (color && color.value && (color.mode !== "gradient"))
                 {
                     var input = this.application.ninja.colorController.colorModel.input;
 
@@ -295,10 +300,10 @@ exports.EyedropperTool = Montage.create(toolBase, {
                 x = tmpPt[0];
                 y = tmpPt[1];
 
-                if(x < innerBounds[0][0]) return ElementsMediator.getProperty(elt, "border-left-color");
-                if(x > innerBounds[2][0]) return ElementsMediator.getProperty(elt, "border-right-color");
-                if(y < innerBounds[0][1]) return ElementsMediator.getProperty(elt, "border-top-color");
-                if(y > innerBounds[1][1]) return ElementsMediator.getProperty(elt, "border-bottom-color");
+                if(x < innerBounds[0][0]) return ElementsMediator.getColor(elt, false, "left");
+                if(x > innerBounds[2][0]) return ElementsMediator.getColor(elt, false, "right");
+                if(y < innerBounds[0][1]) return ElementsMediator.getColor(elt, false, "top");
+                if(y > innerBounds[1][1]) return ElementsMediator.getColor(elt, false, "bottom");