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