7 files changed, 186 insertions, 49 deletions

diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 752aa2a3..4ce9976a 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -5,6 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var ShapeTool = require("js/tools/ShapeTool").ShapeTool;
+var ShapesController =  require("js/controllers/elements/shapes-controller").ShapesController;
 var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase;
 var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
 var Montage = require("montage/core/core").Montage;
@@ -69,12 +70,46 @@ exports.BrushTool = Montage.create(ShapeTool, {
                     if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){
                         this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor);
                     }
+                    if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){
+                        this._selectedBrushStroke.setSecondStrokeColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor);
+                    }
                     //add this point to the brush stroke in case the user does a mouse up before doing a mouse move
                     var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY);
                     this._selectedBrushStroke.addPoint(currMousePos);
 
-                    //TODO get these values from the options
-                    this._selectedBrushStroke.setStrokeWidth(20);
+                    var strokeSize = 1;
+                    if (this.options.strokeSize) {
+                        strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units);
+                    }
+                    this._selectedBrushStroke.setStrokeWidth(strokeSize);
+
+                    var strokeHardness = 100;
+                    if (this.options.strokeHardness){
+                        strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units);
+                    }
+                    this._selectedBrushStroke.setStrokeHardness(strokeHardness);
+
+                    var doSmoothing = false;
+                    if (this.options.doSmoothing){
+                        doSmoothing = this.options.doSmoothing;
+                    }
+                    this._selectedBrushStroke.setDoSmoothing(doSmoothing);
+
+                    var useCalligraphic = false;
+                    if (this.options.useCalligraphic){
+                        useCalligraphic = this.options.useCalligraphic;
+                    }
+                    if (useCalligraphic) {
+                        this._selectedBrushStroke.setStrokeUseCalligraphic(true);
+                        var strokeAngle = 0;
+                        if (this.options.strokeAngle){
+                            strokeAngle= ShapesController.GetValueInPixels(this.options.strokeAngle.value, this.options.strokeAngle.units);
+                        }
+                        this._selectedBrushStroke.setStrokeAngle(Math.PI * -strokeAngle/180);
+                    } else {
+                        this._selectedBrushStroke.setStrokeUseCalligraphic(false);
+                    }
+                    
                 }
                 NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove();
             } //value: function (event) {
@@ -114,7 +149,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
 
                 if (this._isDrawing) {
                     var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY);
-                    if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<100){
+                    if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<1000){
                        this._selectedBrushStroke.addPoint(currMousePos);
                     }
                     this.ShowCurrentBrushStrokeOnStage();
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index 11c15158..927b86cf 100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -6,9 +6,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage = require("montage/core/core").Montage,
     ElementsMediator = require("js/mediators/element-mediator").ElementMediator,
-    drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
-    vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils,
-    toolBase = require("js/tools/ToolBase").toolBase;
+    toolBase = require("js/tools/ToolBase").toolBase,
+    ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,
+    World = require("js/lib/drawing/world").World,
+    njModule = require("js/lib/NJUtils");
 
 exports.EyedropperTool = Montage.create(toolBase, {
 
@@ -17,6 +18,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
     _color: { value: null},
     _elementUnderMouse: { value: null },
     _imageDataCanvas: { value: null },
+    _webGlDataCanvas: { value: null },
+    _webGlWorld: { value: null },
     _imageDataContext: { value: null },
     _canSnap: { value: false },
 
@@ -30,6 +33,11 @@ exports.EyedropperTool = Montage.create(toolBase, {
                         else
                         {
                 NJevent("disableStageMove");
+                this._deleteImageDataCanvas();
+                this._isMouseDown = false;
+                this._elementUnderMouse = null;
+                this._previousColor = null;
+                this._color = null;
                         }
         }
     },
@@ -123,7 +131,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
                                                                 new WebKitPoint(event.pageX, event.pageY)),
                         ctx = obj.getContext("2d");
 
-                    c = this._getColorFromCanvas(ctx, pt);
+                    c = this._getColorFromCanvas(ctx, [pt.x, pt.y]);
                     if(c)
                     {
                         color = this.application.ninja.colorController.getColorObjFromCss(c);
@@ -131,17 +139,27 @@ exports.EyedropperTool = Montage.create(toolBase, {
                 }
                 else
                 {
-                    this._deleteImageDataCanvas();
+                    if(ShapesController.isElementAShape(obj))
+                    {
+                        c = this._getColorFromShape(obj, event);
+                    }
+                    else
+                    {
+                        c = this._getColorFromElement(obj, event);
+                    }
 
-                    c = this._getColorFromElement(obj, event);
                     if(typeof(c) === "string")
                     {
                         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);
@@ -161,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;
 
@@ -232,6 +251,8 @@ exports.EyedropperTool = Montage.create(toolBase, {
     _getColorFromElement: {
         value: function(elt, event)
         {
+            this._deleteImageDataCanvas();
+
             var border = ElementsMediator.getProperty(elt, "border"),
                 borderWidth,
                 bounds3D,
@@ -279,19 +300,53 @@ 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");
             }
 
             return ElementsMediator.getColor(elt, true);
         }
     },
 
-    _getColorAtPoint: {
+    // TODO - We don't want to calculate this repeatedly
+    _getColorFromShape: {
         value: function(elt, event)
         {
+            var c,
+                ctx,
+                tmpPt,
+                pt = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,