Merge pull request #159 from mqg734/WebGLMaterials

3D tools, eyedropper, fill, ink-bucket, gradients and shape fixes.

17 files changed, 180 insertions, 137 deletions

diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 2171d2c6..4347658a 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -305,7 +305,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
 
                 if (!canvas) {
                     var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
-                    var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas);
+                    var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas, true);
                     ElementMediator.addElements(newCanvas, elementModel.data, false);
 
                     // create all the GL stuff
@@ -334,12 +334,6 @@ exports.BrushTool = Montage.create(ShapeTool, {
                             newCanvas.elementModel.selection = "BrushStroke";
                             newCanvas.elementModel.pi = "BrushStrokePi";
                             newCanvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
-                            var strokeColor = this._selectedBrushStroke.getStrokeColor();
-                            newCanvas.elementModel.shapeModel.stroke = strokeColor;
-                            if(strokeColor) {
-                                newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke;
-                            }
-                            newCanvas.elementModel.shapeModel.strokeMaterial = this._selectedBrushStroke.getStrokeMaterial();
 
                             newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke;
                             newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D;
diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js
index 4b07ae83..746f20cf 100755
--- a/js/tools/FillTool.js
+++ b/js/tools/FillTool.js
@@ -17,11 +17,12 @@ var Montage = require("montage/core/core").Montage,
 exports.FillTool = Montage.create(ModifierToolBase, {
         _canSnap: { value: false },
         _canColor: { value: true },
+        _targetedElement: { value: null },
 
     HandleMouseMove: {
         value : function (event)
                 {
-            var obj = this.application.ninja.stage.GetElement(event);
+            var obj = this.application.ninja.stage.GetSelectableElement(event);
             var cursor = "url('images/cursors/fill.png') 14 14, default";
             var canColor = true;
             if (obj)
@@ -31,6 +32,23 @@ exports.FillTool = Montage.create(ModifierToolBase, {
                 {
                     cursor = "url('images/cursors/nofill.png') 14 14, default";
                     canColor = false;
+                    if(this._targetedElement)
+                    {
+                        this._targetedElement.classList.remove("active-element-outline");
+                        this._targetedElement = null;
+                    }
+                }
+                else
+                {
+                    if (obj !== this._targetedElement)
+                    {
+                        if(this._targetedElement)
+                        {
+                            this._targetedElement.classList.remove("active-element-outline");
+                        }
+                    }
+                    this._targetedElement = obj;
+                    this._targetedElement.classList.add("active-element-outline");
                 }
             }
             this.application.ninja.stage.drawingCanvas.style.cursor = cursor;
diff --git a/js/tools/InkBottleTool.js b/js/tools/InkBottleTool.js
index 8340ef50..95c2e71d 100755
--- a/js/tools/InkBottleTool.js
+++ b/js/tools/InkBottleTool.js
@@ -11,11 +11,12 @@ var Montage = require("montage/core/core").Montage,
 exports.InkBottleTool = Montage.create(ModifierToolBase, {
         _canSnap: { value: false },
         _canColor: { value: true },
+    _targetedElement: { value: null },
 
     HandleMouseMove: {
         value : function (event)
                 {
-            var obj = this.application.ninja.stage.GetElement(event);
+            var obj = this.application.ninja.stage.GetSelectableElement(event);
             var cursor = "url('images/cursors/ink.png') 6 11, default";
             var canColor = true;
             if (obj)
@@ -25,7 +26,25 @@ exports.InkBottleTool = Montage.create(ModifierToolBase, {
                 {
                     cursor = "url('images/cursors/ink_no.png') 6 11, default";
                     canColor = false;
+                    if(this._targetedElement)
+                    {
+                        this._targetedElement.classList.remove("active-element-outline");
+                        this._targetedElement = null;
+                    }
                 }
+                else
+                {
+                    if (obj !== this._targetedElement)
+                    {
+                        if(this._targetedElement)
+                        {
+                            this._targetedElement.classList.remove("active-element-outline");
+                        }
+                    }
+                    this._targetedElement = obj;
+                    this._targetedElement.classList.add("active-element-outline");
+                }
+
             }
             this.application.ninja.stage.drawingCanvas.style.cursor = cursor;
             this._canColor = canColor;
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 455f519e..3e9167fd 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -78,7 +78,7 @@ exports.LineTool = Montage.create(ShapeTool, {
                         }
 
                         canvas = NJUtils.makeNJElement("canvas", "Canvas", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
-                        var elementModel = TagTool.makeElement(w, h, drawData.planeMat, drawData.midPt, canvas);
+                        var elementModel = TagTool.makeElement(w, h, drawData.planeMat, drawData.midPt, canvas, true);
                         canvas.elementModel.isShape = true;
                         this.application.ninja.elementMediator.addElements(canvas, elementModel.data);
                     } else {
@@ -225,6 +225,7 @@ exports.LineTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
+                strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
@@ -243,19 +244,13 @@ exports.LineTool = Montage.create(ShapeTool, {
                 canvas.elementModel.selection = "Line";
                 canvas.elementModel.pi = "LinePi";
                 canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
-                canvas.elementModel.shapeModel.stroke = strokeColor;
-                if(strokeColor)
-                {
-                    canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke;
-                }
-
-                canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
 
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
 
                 canvas.elementModel.shapeModel.GLGeomObj = line;
                 canvas.elementModel.shapeModel.useWebGl = this.options.use3D;
+                canvas.elementModel.shapeModel.slope = slope;
             }
             else
             {
diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js
index a10e0bb5..e8e88d1d 100755
--- a/js/tools/OvalTool.js
+++ b/js/tools/OvalTool.js
@@ -53,12 +53,14 @@ exports.OvalTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
+                strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor;
 
                 var fillM = this.options.fillMaterial;
                 if(fillM)
                 {
                     fillMaterial = Object.create(MaterialsModel.getMaterial(fillM));
                 }
+                fillColor = ShapesController.getMaterialColor(fillM) || fillColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
@@ -78,22 +80,9 @@ exports.OvalTool = Montage.create(ShapeTool, {
                 canvas.elementModel.selection = "Oval";
                 canvas.elementModel.pi = "OvalPi";
                 canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
-                canvas.elementModel.shapeModel.stroke = strokeColor;