From 4d132fcbde4540c2cac6c0df613940353e2690f6 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 3 Apr 2012 12:03:16 -0700 Subject: Give user feedback about which element the Fill/InkBottle tools will act on. Signed-off-by: Nivesh Rajbhandari --- js/tools/FillTool.js | 20 +++++++++++++++++++- js/tools/InkBottleTool.js | 21 ++++++++++++++++++++- js/tools/ShapeTool.js | 11 +++++------ js/tools/modifier-tool-base.js | 5 +++++ 4 files changed, 49 insertions(+), 8 deletions(-) (limited to 'js/tools') 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; + } } } }, -- cgit v1.2.3