Merge branch 'refs/heads/WebGLFileIO' into ToolFixes

Conflicts:
	assets/canvas-runtime.js
	js/controllers/elements/shapes-controller.js
	js/lib/drawing/world.js
	js/lib/geom/geom-obj.js
	js/lib/geom/line.js
	js/mediators/element-mediator.js
	js/panels/presets/animations-presets.reel/animations-presets.js
	js/panels/presets/style-presets.reel/style-presets.js
	js/panels/presets/transitions-presets.reel/transitions-presets.js

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

10 files changed, 102 insertions, 66 deletions

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..e6e05b04 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -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;
-                canvas.elementModel.shapeModel.fill = fillColor;
-                if(strokeColor)
-                {
-                    canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke;
-                }
-                if(fillColor)
-                {
-                    canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill;
-                }
 
                 canvas.elementModel.shapeModel.innerRadius = this.options.innerRadius.value  + " " + this.options.innerRadius.units;
 
-                canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial;
-                canvas.elementModel.shapeModel.fillMaterial = fillMaterial;
-
                 canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex;
                 canvas.elementModel.shapeModel.strokeStyle = strokeStyle;
 
diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js
index 957afea9..0c14a559 100755
--- a/js/tools/RectTool.js
+++ b/js/tools/RectTool.js
@@ -72,12 +72,14 @@ exports.RectTool = 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);
@@ -98,25 +100,12 @@ exports.RectTool = Montage.create(ShapeTool, {
                 canvas.elementModel.selection = "Rectangle";
                 canvas.elementModel.pi = "RectanglePi";
                 canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units;
-                canvas.elementModel.shapeModel.stroke = strokeColor;
-                canvas.elementModel.shapeModel.fill = fillColor;
-                if(strokeColor)
-                {