From 022c5348957cc6de1bbbeddf6fa8e0a0c1fdc976 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 29 Jun 2016 17:39:40 -0300
Subject: [PATCH] LT-250: Fixing non-active state issue for toolbar

---
 .../components/toolbarSection/toolbarSection.js   |  1 -
 .../toolbarSectionButton.html                     |  6 +++---
 .../toolbarSectionButton/toolbarSectionButton.js  | 13 +++++++++++++
 Packages/viewerbase/lib/toolManager.js            | 15 +++++++--------
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
index f8163dc9a..2c7cff8f1 100644
--- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
+++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
@@ -115,7 +115,6 @@ Template.toolbarSection.events({
         var elements = $('.imageViewerViewport');
 
         var activeTool = toolManager.getActiveTool();
-        $('.toolbarSectionButton').removeClass('active');
         if (tool === activeTool) {
             var defaultTool = toolManager.getDefaultTool();
             console.log('Setting active tool to: ' + defaultTool);
diff --git a/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.html b/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.html
index 61438ee15..919ca619d 100644
--- a/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.html
+++ b/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.html
@@ -1,12 +1,12 @@
 <template name="toolbarSectionButton">
-    <div id="{{id}}" class="toolbarSectionButton rp-x-1 {{classes}}" title="{{title}}">
+    <div id="{{this.id}}" class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}}" title="{{this.title}}">
         <div class="svgContainer">
             <svg>
-                <use xlink:href={{svgLink}}></use>
+                <use xlink:href={{this.svgLink}}></use>
             </svg>
         </div>
         <div class="buttonLabel">
-            {{title}}
+            {{this.title}}
         </div>
     </div>
 </template>
diff --git a/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.js b/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.js
index e69de29bb..1e0bd9317 100644
--- a/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.js
+++ b/Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.js
@@ -0,0 +1,13 @@
+Template.toolbarSectionButton.helpers({
+    activeClass() {
+        const instance = Template.instance();
+
+        // Check if the current tool is the active one
+        if (instance.data.id === Session.get('ToolManagerActiveTool')) {
+            // Return the active class
+            return 'active';
+        }
+
+        return;
+    }
+});
diff --git a/Packages/viewerbase/lib/toolManager.js b/Packages/viewerbase/lib/toolManager.js
index ce0805340..04a83dbdf 100644
--- a/Packages/viewerbase/lib/toolManager.js
+++ b/Packages/viewerbase/lib/toolManager.js
@@ -1,5 +1,5 @@
-var activeTool = "wwwc";
-var defaultTool = "wwwc";
+var activeTool = 'wwwc';
+var defaultTool = 'wwwc';
 
 var tools = {};
 
@@ -132,6 +132,7 @@ toolManager = {
                 } else {
                     tools[toolType].mouse[action](element);
                 }
+
                 tools[toolType].touch[action](element);
             });
         });
@@ -196,22 +197,20 @@ toolManager = {
             elements = $('.imageViewerViewport');
         }
 
-        $('#toolbar .btn-group button').removeClass('active');
-        var toolButton = document.getElementById(tool);
-        if (toolButton) {
-            toolButton.classList.add('active');
-        }
-
         // Otherwise, set the active tool for all viewport elements
         $(elements).each(function(index, element) {
             toolManager.setActiveToolForElement(tool, element);
         });
         activeTool = tool;
+
+        // Store the active tool in the session in order to enable reactivity
+        Session.set('ToolManagerActiveTool', tool);
     },
     getActiveTool: function() {
         if (!activeTool) {
             activeTool = defaultTool;
         }
+
         return activeTool;
     },
     setDefaultTool: function(tool) {