8 files changed, 83 insertions, 32 deletions

diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 5d983a93..85a9e963 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -131,14 +131,17 @@ exports.BrushTool = Montage.create(ShapeTool, {
              //start a new brush stroke
              if (this._selectedBrushStroke === null){
                  this._selectedBrushStroke = new BrushStroke();
-                 var colorArray=[0,0,0,0];
-                 var color = this.options.fill.color;
-                 if (color){
-                     colorArray = [color.r/255, color.g/255, color.b/255, color.a];
+                 var colorObj;
+                 var fill = this.options.fill;
+                 var color = fill.color;
+                 if(fill.colorMode === "gradient") {
+                     colorObj = {gradientMode:fill.color.gradientMode, color:fill.color.stops};
+                 } else if (color) {
+                     colorObj = [color.r/255, color.g/255, color.b/255, color.a];
                  } else {
-                     colorArray = [1,1,1,0];
+                     colorObj = [1,1,1,0];
                  }
-                 this._selectedBrushStroke.setFillColor(colorArray);
+                 this._selectedBrushStroke.setFillColor(colorObj);
 
                  //add this point to the brush stroke in case the user does a mouse up before doing a mouse move
                  var currMousePos = hitRec.calculateStageWorldPoint();
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 07429bc0..fde09959 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -270,6 +270,9 @@ exports.LineTool = Montage.create(ShapeTool, {
                 // TODO - update the shape's info only.  shapeModel will likely need an array of shapes.
             }
 
+            // TODO - This needs to be moved into geom obj's init routine instead of here
+            this.setColor(this.options.stroke, null, canvas, "lineTool");
+
             if(canvas.elementModel.isShape)
             {
                 this.application.ninja.selectionController.selectElement(canvas);
diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js
index ce812398..33bf763d 100755
--- a/js/tools/OvalTool.js
+++ b/js/tools/OvalTool.js
@@ -94,6 +94,9 @@ exports.OvalTool = Montage.create(ShapeTool, {
                 // TODO - update the shape's info only.  shapeModel will likely need an array of shapes.
             }
 
+            // TODO - This needs to be moved into geom obj's init routine instead of here
+            this.setColor(this.options.stroke, this.options.fill, canvas, "ovalTool");
+
             if(canvas.elementModel.isShape)
             {
                 this.application.ninja.selectionController.selectElement(canvas);
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 2cffb44d..1097f28c 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -338,22 +338,28 @@ exports.PenTool = Montage.create(ShapeTool, {
                 }
                 this._selectedSubpath.setStrokeWidth(strokeSize);
 
-                var colorArray=[];
-                var color = this.options.stroke.color;
-                if (color){
-                    colorArray = [color.r/255, color.g/255, color.b/255, color.a];
-                }else {
-                    colorArray = [1,1,1,0];
+                var colorObj;
+                var stroke = this.options.stroke;
+                var color = stroke.color;
+                if(stroke.colorMode === "gradient") {
+                    colorObj = {gradientMode:stroke.color.gradientMode, color:stroke.color.stops};
+                } else if (color) {
+                    colorObj = [color.r/255, color.g/255, color.b/255, color.a];
+                } else {
+                    colorObj = [1,1,1,0];
                 }
-                this._selectedSubpath.setStrokeColor(colorArray);
-
-                color = this.options.fill.color;
-                if (color){
-                    colorArray = [color.r/255, color.g/255, color.b/255, color.a];
+                this._selectedSubpath.setStrokeColor(colorObj);
+
+                var fill = this.options.fill;
+                color = fill.color;
+                if(fill.colorMode === "gradient") {
+                    colorObj = {gradientMode:fill.color.gradientMode, color:fill.color.stops};
+                } else if (color) {
+                    colorObj = [color.r/255, color.g/255, color.b/255, color.a];
                 } else {
-                    colorArray = [1,1,1,0];
+                    colorObj = [1,1,1,0];
                 }
-                this._selectedSubpath.setFillColor(colorArray);
+                this._selectedSubpath.setFillColor(colorObj);
             } //if the selectedSubpath was null and needed to be constructed
 
             //build the current mouse position in stage world space in case we don't already have a canvas
diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js
index b35a101a..df049395 100755
--- a/js/tools/RectTool.js
+++ b/js/tools/RectTool.js
@@ -117,6 +117,9 @@ exports.RectTool = Montage.create(ShapeTool, {
                 // TODO - update the shape's info only.  shapeModel will likely need an array of shapes.
             }
 
+            // TODO - This needs to be moved into geom obj's init routine instead of here
+            this.setColor(this.options.stroke, this.options.fill, canvas, "rectTool");
+
             if(canvas.elementModel.isShape)
             {
                 this.application.ninja.selectionController.selectElement(canvas);
diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js
index 8d381711..6ff61546 100755
--- a/js/tools/ShapeTool.js
+++ b/js/tools/ShapeTool.js
@@ -209,7 +209,31 @@ exports.ShapeTool = Montage.create(DrawingTool, {
 
                         return target;
                 }
-        }
+        },
+
+    // We can draw on an existing canvas unless it has only a single shape object
+    setColor: {
+        value: function(stroke, fill, canvas, toolId)
+        {
+            if(stroke && stroke.color)
+            {
+                this.application.ninja.elementMediator.setColor([canvas], {mode:stroke.colorMode, color:stroke.color}, false, "Change", toolId);
+            }
+            else
+            {
+                this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, false, "Change", toolId);
+            }
+
+            if(fill && fill.color)
+            {
+                this.application.ninja.elementMediator.setColor([canvas], {mode:fill.colorMode, color:fill.color}, true, "Change", toolId);
+            }
+            else
+            {
+                this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, true, "Change", toolId);
+            }
+        }
+    }
 
 });
 
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js
index fac6798f..31918f92 100755
--- a/js/tools/TagTool.js
+++ b/js/tools/TagTool.js
@@ -81,7 +81,7 @@ exports.TagTool = Montage.create(DrawingTool, {
     // TODO: Add position support
     insertElement: {
         value: function(drawData) {
-            var element, styles;
+            var element, styles, color;
 
             // Create the element
             if(this.options.selectedElement === "custom") {
@@ -95,8 +95,15 @@ exports.TagTool = Montage.create(DrawingTool, {
             styles = document.application.njUtils.stylesFromDraw(element, ~~drawData.width, ~~drawData.height, drawData);
 
             // Add color
-            if(this.options.getProperty("fill.colorMode") !== "nocolor") {
-                styles['background-color'] = this.options.getProperty("fill.color.css");
+            color = this.options.fill;
+            switch(color.colorMode) {
+                case "nocolor":
+                    break;
+                case "gradient":
+                    styles['background-image'] = color.color.css;
+                    break;
+                default:
+                    styles['background-color'] = color.color.css;
             }
 
             // Add the element and styles
diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js
index 1e1c9e5b..3704a451 100644
--- a/js/tools/bindingTool.js
+++ b/js/tools/bindingTool.js
@@ -12,17 +12,17 @@ SelectionTool = require("js/tools/SelectionTool").SelectionTool;
 
 exports.BindingTool = Montage.create(ModifierToolBase, {
     drawingFeedback: { value: { mode: "Draw2D", type: "" } },
-    _selectedComponent: {
+    _selectedElement: {
         value: null
     },
 
-    selectedComponent: {
+    selectedElement: {
         get:function() {
-            return this._selectedComponent;
+            return this._selectedElement;
         },
         set: function(val) {
-            this._selectedComponent = val;
-            this.application.ninja.stage.bindingView.selectedComponent = val;
+            this._selectedElement = val;
+            this.application.ninja.stage.bindingView.selectedElement = val;
         }
     },
 
@@ -33,9 +33,10 @@ exports.BindingTool = Montage.create(ModifierToolBase, {
             {
                 NJevent("enableStageMove");
                 this.application.ninja.workspaceMode = "binding";
+                this.application.ninja.stage.bindingView.hide = false;
                 if (this.application.ninja.selectedElements.length !== 0 ) {
                     if(typeof(this.application.ninja.selectedElements[0].controller) !== "undefined") {
-                        this.selectedComponent = this.application.ninja.selectedElements[0].controller;
+                        this.selectedElement = this.application.ninja.selectedElements[0];
                     } else {
                         this.selectedComponent = null;
                     }
@@ -47,6 +48,7 @@ exports.BindingTool = Montage.create(ModifierToolBase, {