Give user feedback about which element the Fill/InkBottle tools will act on.

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

5 files changed, 51 insertions, 10 deletions

diff --git a/js/document/templates/montage-html/default_html.css b/js/document/templates/montage-html/default_html.css
index 6c2b415f..424c5801 100755
--- a/js/document/templates/montage-html/default_html.css
+++ b/js/document/templates/montage-html/default_html.css
@@ -70,8 +70,8 @@ body
   -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 }
 
-.elem-red-outline {
-  outline: red solid thin;
+.active-element-outline {
+  outline: #adff2f solid 2px;
 }
 
 .nj-preset-transition {
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/ShapeTool.js b/js/tools/ShapeTool.js
index 85009bc2..92284d78 100755
--- a/js/tools/ShapeTool.js
+++ b/js/tools/ShapeTool.js
@@ -119,7 +119,7 @@ exports.ShapeTool = Montage.create(DrawingTool, {
         RemoveCustomFeedback: {
                 value: function (event) {
                         if (this._targetedElement) {
-                this._targetedElement.classList.remove("elem-red-outline");
+                this._targetedElement.classList.remove("active-element-outline");
                                 this._targetedElement = null;
                         }
 
@@ -136,23 +136,22 @@ exports.ShapeTool = Montage.create(DrawingTool, {
         _showFeedbackOnMouseMove: {
                 value: function (event) {
                         // TODO - This call is causing the canvas to redraw 3 times per mouse move
-                        var targetedObject = this.application.ninja.stage.GetElement(event);
+                        var targetedObject = this.application.ninja.stage.GetSelectableElement(event);
 
                         if (targetedObject) {
-                                // TODO - Clean this up
                                 if((targetedObject.nodeName === "CANVAS") && !ShapesController.isElementAShape(targetedObject))
                                 {
                                         if (targetedObject !== this._targetedElement) {
                                                 if(this._targetedElement)
                                                 {
-                            this._targetedElement.classList.remove("elem-red-outline");
+                            this._targetedElement.classList.remove("active-element-outline");
                                                 }
                                                 this._targetedElement = targetedObject;
-                        this._targetedElement.classList.add("elem-red-outline");
+                        this._targetedElement.classList.add("active-element-outline");
                                         }
                                 }
                                 else if (this._targetedElement) {
-                                        this._targetedElement.classList.remove("elem-red-outline");
+                                        this._targetedElement.classList.remove("active-element-outline");
                                         this._targetedElement = null;
                                 }
                         }
diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js
index f58ecb53..a1812650 100755
--- a/js/tools/modifier-tool-base.js
+++ b/js/tools/modifier-tool-base.js
@@ -758,6 +758,11 @@ exports.ModifierToolBase = Montage.create(DrawingTool, {
                 snapManager.enableGridSnap( snapManager.gridSnapEnabledAppLevel() );
                 this.eventManager.removeEventListener( "toolOptionsChange", this, false);
                 this.eventManager.removeEventListener( "toolDoubleClick", this, false);
+
+                if (this._targetedElement) {
+                    this._targetedElement.classList.remove("active-element-outline");
+                    this._targetedElement = null;
+                }
             }
         }
     },