LT-250: Fixing non-active state issue for toolbar

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);

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>

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;
+    }
+});

Packages/viewerbase/lib/toolManager.js

@@ -1,5 +1,5 @@
-var activeTool = "wwwc";
+var activeTool = 'wwwc';
-var defaultTool = "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) {