Fixing eyedropper tool to get color from image data. This required us to workaround having inconsistent color object.

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

3 files changed, 66 insertions, 47 deletions

diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js
index e3b15f1c..a6e41dd3 100755
--- a/js/controllers/color-controller.js
+++ b/js/controllers/color-controller.js
@@ -322,7 +322,19 @@ exports.ColorController = Montage.create(Component, {
                         //Simple solid color
                         color = this.parseCssToColor(css);
                 }
-                //Returning color object (or null if none)
+            // TODO - Hack for inconsistent color object -- some workflows set color.color and some color.value
+            if(color)
+            {
+                if(color.value && !color.color)
+                {
+                    color.color = color.value;
+                }
+                else if(color.color && !color.value)
+                {
+                    color.value = color.color;
+                }
+            }
+            //Returning color object (or null if none)
                 return color;
         }
     },
diff --git a/js/controllers/elements/image-controller.js b/js/controllers/elements/image-controller.js
index 5abce13e..25ca8da6 100755
--- a/js/controllers/elements/image-controller.js
+++ b/js/controllers/elements/image-controller.js
@@ -19,7 +19,7 @@ exports.ImageController = Montage.create(ElementController, {
                     return el.getAttribute(prop);
                     break;
                 default:
-                    return ElementController.getProperty(el, prop);
+                    return ElementController.getProperty(el, prop, true);
             }
         }
     },
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 43286122..d007da39 100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -51,12 +51,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
                 this._isMouseDown = false;
                 this._escape = false;
                 this._elementUnderMouse = null;
-                if(this._imageDataCanvas)
-                {
-                    this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
-                    this._imageDataCanvas = null;
-                    this._imageDataContext = null;
-                }
+                this._deleteImageDataCanvas();
             }
             if(this._isMouseDown)
             {
@@ -80,12 +75,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
                 this._color = null;
 
                 this._elementUnderMouse = null;
-                if(this._imageDataCanvas)
-                {
-                    this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
-                    this._imageDataCanvas = null;
-                    this._imageDataContext = null;
-                }
+                this._deleteImageDataCanvas();
             }
         }
     },
@@ -119,9 +109,15 @@ exports.EyedropperTool = Montage.create(toolBase, {
                 obj = this.application.ninja.stage.GetElement(event);
             if (obj)
             {
+                if(this.application.ninja.currentDocument.inExclusion(obj) !== -1)
+                {
+                    this._elementUnderMouse = null;
+                    this._deleteImageDataCanvas();
+                    return;
+                }
                 this._elementUnderMouse = obj;
                 // Depending on the object type, we need to get different colors
-                if(obj.elementModel.type === "IMG")
+                if(obj.elementModel.selection === "image")
                 {
                     c = this._getColorAtPoint(obj, event);
                     if(c)
@@ -129,14 +125,9 @@ exports.EyedropperTool = Montage.create(toolBase, {
                         color = this.application.ninja.colorController.getColorObjFromCss(c);
                     }
                 }
-                else if (obj.elementModel.type === "CANVAS")
+                else if (obj.elementModel.selection === "canvas")
                 {
-                    if(this._imageDataCanvas)
-                    {
-                        this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
-                        this._imageDataCanvas = null;
-                        this._imageDataContext = null;
-                    }
+                    this._deleteImageDataCanvas();
 
                     var pt = webkitConvertPointFromPageToNode(obj,
                                                                 new WebKitPoint(event.pageX, event.pageY)),
@@ -150,14 +141,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
                 }
                 else
                 {
-                    if(this._imageDataCanvas)
-                    {
-                        this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
-                        this._imageDataCanvas = null;
-                        this._imageDataContext = null;
-                    }
+                    this._deleteImageDataCanvas();
 
-                    // TODO - figure out if user clicked on a border - for now, just get fill
                     c = ElementsMediator.getColor(obj, this._isOverBackground(obj, event));
                     if(c)
                     {
@@ -180,12 +165,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
             else
             {
                 this._elementUnderMouse = null;
-                if(this._imageDataCanvas)
-                {
-                    this.application.ninja.stage.element.removeChild(this._imageDataCanvas);
-                    this._imageDataCanvas = null;
-                    this._imageDataContext = null;
-                }
+                this._deleteImageDataCanvas();
             }
 
         }
@@ -273,38 +253,44 @@ exports.EyedropperTool = Montage.create(toolBase, {
     _getColorAtPoint: {
         value: function(elt, event)
         {
-            var imageData;
             if(!this._imageDataCanvas)
             {
                 this._imageDataCanvas = document.createElement("canvas");
-                this._imageDataCanvas.style.display = "block";
-                this._imageDataCanvas.style.position = "absolute";
 
-                var eltCoords = this.application.ninja.stage.toViewportCoordinates(elt.offsetLeft, elt.offsetTop);
+                this._applyElementStyles(elt, this._imageDataCanvas, ["display", "position", "width", "height",
+                                                                "-webkit-transform", "-webkit-transform-style"]);
+
+                var l = this.application.ninja.elementMediator.getProperty(elt, "left", parseInt),
+                    t = this.application.ninja.elementMediator.getProperty(elt, "top", parseInt),
+                    w = this.application.ninja.elementMediator.getProperty(elt, "width", parseInt),
+                    h = this.application.ninja.elementMediator.getProperty(elt, "height", parseInt);
+
+                var eltCoords = this.application.ninja.stage.toViewportCoordinates(l, t);
                 this._imageDataCanvas.style.left = eltCoords[0] + "px";
                 this._imageDataCanvas.style.top = eltCoords[1] + "px";
-                this._imageDataCanvas.style.width = elt.offsetWidth + "px";
-                this._imageDataCanvas.style.height = elt.offsetHeight + "px";
-                this._imageDataCanvas.width = elt.offsetWidth;
-                this._imageDataCanvas.height = elt.offsetHeight;
+                this._imageDataCanvas.width = w;
+                this._imageDataCanvas.height = h;
 
-                this.application.ninja.stage.element.appendChild(this._imageDataCanvas);
+//                this.application.ninja.currentDocument.documentRoot.appendChild(this._imageDataCanvas);
 
                 this._imageDataContext = this._imageDataCanvas.getContext("2d");
                 this._imageDataContext.drawImage(elt, 0, 0);
             }
 
-            var pt = webkitConvertPointFromPageToNode(this._imageDataCanvas,
+            var pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,
                                                         new WebKitPoint(event.pageX, event.pageY));
 
-            return this._getColorFromCanvas(this._imageDataContext, pt);
+            var tmpPt = this.application.ninja.stage.viewUtils.globalToLocal([pt.x, pt.y], elt);
+
+            return this._getColorFromCanvas(this._imageDataContext, tmpPt);
         }
     },
 
     _getColorFromCanvas: {
         value: function(ctx, pt)
         {
-            var imageData = ctx.getImageData(pt.x, pt.y, 1, 1).data;
+//            var imageData = ctx.getImageData(pt.x, pt.y, 1, 1).data;
+            var imageData = ctx.getImageData(pt[0], pt[1], 1, 1).data;
             if(imageData)
             {
                 return ("rgba(" + imageData[0] + "," + imageData[1] + "," + imageData[2] + "," + imageData[3] + ")");
@@ -314,6 +300,27 @@ exports.EyedropperTool = Montage.create(toolBase, {
                 return null;
             }
         }
+    },
+
+    _deleteImageDataCanvas : {
+        value: function()
+        {
+            if(this._imageDataCanvas)