Merge branch 'crunexTools'

LesionTracker/client/components/init.js

@@ -1,7 +1,7 @@
 Meteor.startup(function() {
-    toolManager.addTool('lesion', {
+    toolManager.addTool('bidirectional', {
-        mouse: cornerstoneTools.lesion,
+        mouse: cornerstoneTools.bidirectional,
-        touch: cornerstoneTools.lesionTouch
+        touch: cornerstoneTools.bidirectionalTouch
     });
     
     toolManager.addTool('nonTarget', {
@@ -19,10 +19,29 @@ Meteor.startup(function() {
         touch: cornerstoneTools.deleteLesionKeyboardTool
     });
 
+    toolManager.addTool('crTool', {
+        mouse: cornerstoneTools.crTool,
+        touch: cornerstoneTools.crToolTouch
+    });
+
+    toolManager.addTool('unTool', {
+        mouse: cornerstoneTools.unTool,
+        touch: cornerstoneTools.unToolTouch
+    });
+
+    toolManager.addTool('exTool', {
+        mouse: cornerstoneTools.exTool,
+        touch: cornerstoneTools.exToolTouch
+    });
+
+
     var states = toolManager.getToolDefaultStates();
-    states.deactivate.push('lesion');
+    states.deactivate.push('bidirectional');
     states.deactivate.push('nonTarget');
     states.deactivate.push('length');
+    states.deactivate.push('crTool');
+    states.deactivate.push('unTool');
+    states.deactivate.push('exTool');
 
     states.activate.push('deleteLesionKeyboardTool');
 

LesionTracker/client/components/viewer.js

@@ -41,9 +41,9 @@ Template.viewer.onCreated(function() {
         },
         toggleLesionTrackerTools: toggleLesionTrackerTools,
         clearTools: clearTools,
-        lesion: function() {
+        bidirectional: function() {
             // Used for hotkeys
-            toolManager.setActiveTool('lesion');
+            toolManager.setActiveTool('bidirectional');
         },
         nonTarget: function() {
             // Used for hotkeys
@@ -54,7 +54,7 @@ Template.viewer.onCreated(function() {
     // The hotkey can also be an array (e.g. ["NUMPAD0", "0"])
     OHIF.viewer.defaultHotkeys = OHIF.viewer.defaultHotkeys || {};
     OHIF.viewer.defaultHotkeys.toggleLesionTrackerTools = 'O';
-    OHIF.viewer.defaultHotkeys.lesion = 'T'; // Target
+    OHIF.viewer.defaultHotkeys.bidirectional = 'T'; // Target
     OHIF.viewer.defaultHotkeys.nonTarget = 'N'; // Non-target
 
     if (isTouchDevice()) {
@@ -121,6 +121,9 @@ Template.viewer.onCreated(function() {
 
         if (subscriptionsReady) {
 
+            // Set buttons as enabled/disabled when Timepoints collection is ready
+            timepointAutoCheck(dataContext);
+
             TrialResponseCriteria.validateAllDelayed();
 
             ViewerStudies.find().observe({
@@ -223,7 +226,7 @@ Template.viewer.onCreated(function() {
                     // Get the Measurement ID and relevant tool so we can remove
                     // tool data for this Measurement
                     var measurementId = data._id;
-                    var toolType = data.isTarget ? 'lesion' : 'nonTarget';
+                    var toolType = data.toolType;
 
                     // Remove the measurement from all the imageIds on which it exists
                     // as toolData
@@ -261,15 +264,6 @@ Template.viewer.onCreated(function() {
                     TrialResponseCriteria.validateAll();
                 }
             });
-
-            // Set active tool for timepoint
-            if (dataContext && dataContext.timepointIds) {
-                dataContext.timepointIds.forEach(function(timepointId) {
-                    var timepoint = Timepoints.findOne({timepointId: timepointId});
-                    setTimepointActiveTool(timepoint);
-                });
-            }
-
         }
     });
 });

LesionTracker/client/components/viewerMain/viewerMain.js

@@ -4,6 +4,8 @@ Template.viewerMain.helpers({
 
         var buttonData = [];
 
+        var btnGroup = [];
+
         buttonData.push({
             id: 'resetViewport',
             title: 'Reset Viewport',
@@ -54,7 +56,7 @@ Template.viewerMain.helpers({
         });
 
         buttonData.push({
-            id: 'lesion',
+            id: 'bidirectional',
             title: 'Target Tool',
             classes: 'imageViewerTool',
             iconClasses: 'fa fa-arrows-alt'
@@ -81,10 +83,38 @@ Template.viewerMain.helpers({
             iconClasses: 'fa fa-eye'
         });
 
+        // CR/UN/EX Tools
+        var crunexToolsBtns = {
+            id: 'crunexTools',
+            tools:[{
+                id: 'crTool',
+                title: 'CR Tool',
+                classes: 'imageViewerTool',
+                iconClasses: 'fa fa-cr'
+            },
+            {
+                id: 'unTool',
+                title: 'UN Tool',
+                classes: 'imageViewerTool',
+                iconClasses: 'fa fa-un'
+            },
+            {
+                id: 'exTool',
+                title: 'EX Tool',
+                classes: 'imageViewerTool',
+                iconClasses: 'fa fa-ex'
+            }],
+            title: "CR/UN/EX",
+            groupIcon: 'fa fa-exchange'
+        };
+
+        btnGroup.push(crunexToolsBtns);
+
         toolbarOptions.buttonData = buttonData;
         toolbarOptions.includePlayClipButton = false;
         toolbarOptions.includeLayoutButton = false;
         toolbarOptions.includeHangingProtocolButtons = false;
+        toolbarOptions.btnGroup = btnGroup;
         return toolbarOptions;
     }
 });

LesionTracker/client/components/viewerMain/viewerMain.styl

@@ -1,3 +1,16 @@
 .viewerMain
   width: 100%
-  height: 84%
+  height: 84%
+
+//font awesome icons
+.fa-cr:before
+  content: 'CR'
+  font-weight: bold
+
+.fa-un:before
+  content: 'UN'
+  font-weight: bold
+
+.fa-ex:before
+  content: 'EX'
+  font-weight: bold

Packages/lesiontracker/client/compatibility/bidirectionalTool.js

@@ -2,7 +2,7 @@
 
     'use strict';
 
-    var toolType = 'lesion';
+    var toolType = 'bidirectional';
 
     var configuration = {
         setLesionNumberCallback: setLesionNumberCallback,
@@ -100,7 +100,7 @@
             shortestDiameter: 0,
             isDeleted: false,
             isTarget: true,
-            measurementType: 'bidirectional'
+            toolType: 'bidirectional'
         };
         return measurementData;
     }
@@ -126,7 +126,7 @@
         };
 
         // Set lesion number and lesion name
-        var config = cornerstoneTools.lesion.getConfiguration();
+        var config = cornerstoneTools.bidirectional.getConfiguration();
         if (measurementData.lesionNumber === undefined) {
             config.setLesionNumberCallback(measurementData, mouseEventData, doneCallback);
         }
@@ -138,7 +138,7 @@
         // the end point and let the moveHandle move it for us.
         $(element).off('CornerstoneToolsMouseMove', mouseMoveCallback);
         $(element).off('CornerstoneToolsMouseDown', mouseDownCallback);
-        $(element).off('CornerstoneToolsMouseDownActivate', cornerstoneTools.lesion.mouseDownActivateCallback);
+        $(element).off('CornerstoneToolsMouseDownActivate', cornerstoneTools.bidirectional.mouseDownActivateCallback);
         $(element).off('CornerstoneToolsMouseDoubleClick', doubleClickCallback);
 
         // Add a flag for using Esc to cancel tool placement
@@ -177,7 +177,7 @@
 
             $(element).on('CornerstoneToolsMouseMove', eventData, mouseMoveCallback);
             $(element).on('CornerstoneToolsMouseDown', eventData, mouseDownCallback);
-            $(element).on('CornerstoneToolsMouseDownActivate', eventData, cornerstoneTools.lesion.mouseDownActivateCallback);
+            $(element).on('CornerstoneToolsMouseDownActivate', eventData, cornerstoneTools.bidirectional.mouseDownActivateCallback);
             $(element).on('CornerstoneToolsMouseDoubleClick', eventData, doubleClickCallback);
             cornerstone.updateImage(element);
         });
@@ -200,7 +200,7 @@
         var measurementData = createNewMeasurement(touchEventData);
 
         // Set lesion number and lesion name
-        var config = cornerstoneTools.lesion.getConfiguration();
+        var config = cornerstoneTools.bidirectional.getConfiguration();
         if (measurementData.lesionNumber === undefined) {
             config.setLesionNumberCallback(measurementData, mouseEventData, doneCallback);
         }
@@ -210,9 +210,9 @@
 
         // since we are dragging to another place to drop the end point, we can just activate
         // the end point and let the moveHandle move it for us.
-        $(element).off('CornerstoneToolsTouchDrag', cornerstoneTools.lesion.touchMoveHandle);
+        $(element).off('CornerstoneToolsTouchDrag', cornerstoneTools.bidirectional.touchMoveHandle);
-        $(element).off('CornerstoneToolsTap', cornerstoneTools.lesion.tapCallback);
+        $(element).off('CornerstoneToolsTap', cornerstoneTools.bidirectional.tapCallback);
-        $(element).off('CornerstoneToolsDragStartActive', cornerstoneTools.lesion.touchDownActivateCallback);
+        $(element).off('CornerstoneToolsDragStartActive', cornerstoneTools.bidirectional.touchDownActivateCallback);
 
         cornerstone.updateImage(element);
         cornerstoneTools.moveNewHandleTouch(touchEventData, toolType, measurementData, measurementData.handles.end, function() {
@@ -227,9 +227,9 @@
             // perpendicular line is not connected to long-line
             measurementData.handles.perpendicularStart.locked = false;
 
-            $(element).on('CornerstoneToolsTouchDrag', cornerstoneTools.lesion.touchMoveHandle);
+            $(element).on('CornerstoneToolsTouchDrag', cornerstoneTools.bidirectional.touchMoveHandle);
-            $(element).on('CornerstoneToolsTap', cornerstoneTools.lesion.tapCallback);
+            $(element).on('CornerstoneToolsTap', cornerstoneTools.bidirectional.tapCallback);
-            $(element).on('CornerstoneToolsDragStartActive', cornerstoneTools.lesion.touchDownActivateCallback);
+            $(element).on('CornerstoneToolsDragStartActive', cornerstoneTools.bidirectional.touchDownActivateCallback);
             cornerstone.updateImage(element);
         });
     }
@@ -962,7 +962,7 @@
         var color;
         var element = eventData.element;
         var lineWidth = cornerstoneTools.toolStyle.getToolWidth();
-        var config = cornerstoneTools.lesion.getConfiguration();
+        var config = cornerstoneTools.bidirectional.getConfiguration();
 
         for (var i = 0; i < toolData.data.length; i++) {
             var data = toolData.data[i];
@@ -1075,7 +1075,7 @@
             return false;
         }
 
-        var config = cornerstoneTools.lesion.getConfiguration();
+        var config = cornerstoneTools.bidirectional.getConfiguration();
 
         var coords = eventData.currentPoints.canvas;
         var toolData = cornerstoneTools.getToolState(element, toolType);
@@ -1102,7 +1102,7 @@
     }
 
     // module exports
-    cornerstoneTools.lesion = cornerstoneTools.mouseButtonTool({
+    cornerstoneTools.bidirectional = cornerstoneTools.mouseButtonTool({
         createNewMeasurement: createNewMeasurement,
         addNewMeasurement: addNewMeasurement,
         onImageRendered: onImageRendered,
@@ -1113,7 +1113,7 @@
         toolType: toolType
     });
 
-    cornerstoneTools.lesionTouch = cornerstoneTools.touchTool({
+    cornerstoneTools.bidirectionalTouch = cornerstoneTools.touchTool({
         createNewMeasurement: createNewMeasurement,
         addNewMeasurement: addNewMeasurementTouch,
         onImageRendered: onImageRendered,
@@ -1121,6 +1121,6 @@
         toolType: toolType
     });
 
-    cornerstoneTools.lesion.setConfiguration(configuration);
+    cornerstoneTools.bidirectional.setConfiguration(configuration);
 
 })($, cornerstone, cornerstoneMath, cornerstoneTools);

Packages/lesiontracker/client/compatibility/crTool.js

@@ -0,0 +1,10 @@
+(function($, cornerstone, cornerstoneMath, cornerstoneTools) {
+
+    'use strict';
+    var crToolInterface = cornerstoneTools.crunexTool('crTool');
+    cornerstoneTools.crTool = crToolInterface.crunex;
+    cornerstoneTools.crTool.setConfiguration(crToolInterface.defaultConfiguration);
+    cornerstoneTools.crToolTouch = crToolInterface.crunexTouch;
+
+
+})($, cornerstone, cornerstoneMath, cornerstoneTools);

Packages/lesiontracker/client/compatibility/crunexTool.js

@@ -0,0 +1,420 @@
+(function($, cornerstone, cornerstoneMath, cornerstoneTools) {
+
+    'use strict';
+    var responseByToolType = [
+        {"toolType": "crTool", "toolResponse": "CR"},
+        {"toolType": "unTool", "toolResponse": "UN"},
+        {"toolType": "exTool", "toolResponse": "EX"}
+    ];
+
+    function crunexTool(toolType) {
+        var toolInterface = {
+            toolType: toolType
+        };
+
+        var response;
+
+        responseByToolType.forEach(function(tool) {
+            if (tool.toolType === toolInterface.toolType) {
+                response = tool.toolResponse;
+            }
+        });
+
+        var configuration = {
+            setLesionNumberCallback: setLesionNumberCallback,
+            getLesionLocationCallback: getLesionLocationCallback,
+            changeLesionLocationCallback: changeLesionLocationCallback,
+            drawHandles: false,
+            drawHandlesOnHover: false,
+            arrowFirst: true
+        };
+
+        toolInterface.defaultConfiguration =  configuration;
+
+        // Used to cancel tool placement
+        var keys = {
+            ESC: 27
+        };
+
+        // Set lesion number
+        // Get Non-Target lesions on image
+        function setLesionNumberCallback(measurementData, eventData, doneCallback) {
+            var lesionNumber = 1;
+            doneCallback(lesionNumber);
+        }
+        // Define a callback to get your text annotation
+        // This could be used, e.g. to open a modal
+        function getLesionLocationCallback(measurementData, eventData, doneCallback) {
+            // doneCallback(prompt('Enter your lesion location:'));
+        }
+
+        function changeLesionLocationCallback(measurementData, eventData, doneCallback) {
+            doneCallback(prompt('Change your lesion location:'));
+        }
+
+        /// --- Mouse Tool --- ///
+        ///////// BEGIN ACTIVE TOOL ///////
+        function addNewMeasurement(mouseEventData) {
+            var element = mouseEventData.element;
+
+            function doneCallback(lesionNumber) {
+                measurementData.lesionNumber = lesionNumber;
+                measurementData.active = true;
+                cornerstone.updateImage(element);
+            }
+
+            var measurementData = createNewMeasurement(mouseEventData);
+
+            var eventData = {
+                mouseButtonMask: mouseEventData.which
+            };
+
+            var config = cornerstoneTools[toolType].getConfiguration();
+
+            // Set lesion number and lesion name
+            if (measurementData.lesionNumber === undefined) {
+                config.setLesionNumberCallback(measurementData, mouseEventData, doneCallback);
+            }
+
+            // associate this data with this imageId so we can render it and manipulate it
+            cornerstoneTools.addToolState(mouseEventData.element, toolType, measurementData);
+
+            // since we are dragging to another place to drop the end point, we can just activate
+            // the end point and let the moveHandle move it for us.
+            $(element).off('CornerstoneToolsMouseMove', cornerstoneTools[toolType].mouseMoveCallback);
+            $(element).off('CornerstoneToolsMouseDown', cornerstoneTools[toolType].mouseDownCallback);
+            $(element).off('CornerstoneToolsMouseDownActivate', cornerstoneTools[toolType].mouseDownActivateCallback);
+            $(element).off('CornerstoneToolsMouseDoubleClick', doubleClickCallback);
+
+            // Add a flag for using Esc to cancel tool placement
+            var cancelled = false;
+            function cancelCallback(e) {
+                // If the Esc key was pressed, set the flag to true
+                if (e.which === keys.ESC) {
+                    cancelled = true;
+                    cornerstoneTools.removeToolState(mouseEventData.element, toolType, measurementData);
+                }
+
+                // Don't propagate this keydown event so it can't interfere
+                // with anything outside of this tool
+                return false;
+            }
+
+            // Bind a one-time event listener for the Esc key
+            $(element).one('keydown', cancelCallback);
+
+            cornerstone.updateImage(element);
+
+            cornerstoneTools.moveNewHandle(mouseEventData, toolType, measurementData, measurementData.handles.end, function() {
+                if (cancelled || cornerstoneTools.anyHandlesOutsideImage(mouseEventData, measurementData.handles)) {
+                    // delete the measurement
+                    cornerstoneTools.removeToolState(mouseEventData.element, toolType, measurementData);
+                } else {
+                    config.getLesionLocationCallback(measurementData, mouseEventData, doneCallback);
+                }
+
+                // Unbind the Esc keydown hook
+                $(element).off('keydown', cancelCallback);
+
+                $(element).on('CornerstoneToolsMouseMove', eventData, cornerstoneTools[toolType].mouseMoveCallback);
+                $(element).on('CornerstoneToolsMouseDown', eventData, cornerstoneTools[toolType].mouseDownCallback);
+                $(element).on('CornerstoneToolsMouseDownActivate', eventData, cornerstoneTools[toolType].mouseDownActivateCallback);
+                $(element).on('CornerstoneToolsMouseDoubleClick', eventData, doubleClickCallback);
+
+                $(element).off('keydown', cancelCallback);
+
+                cornerstone.updateImage(mouseEventData.element);
+            });
+        }
+
+        function createNewMeasurement(mouseEventData) {
+            var imageId = mouseEventData.image.imageId;
+
+            // Get studyInstanceUid
+            var study = cornerstoneTools.metaData.get('study', imageId);
+            var studyInstanceUid = study.studyInstanceUid;
+            var patientId = study.patientId;
+
+            // Get seriesInstanceUid
+            var series = cornerstoneTools.metaData.get('series', imageId);
+            var seriesInstanceUid = series.seriesInstanceUid;
+
+            // create the measurement data for this tool with the end handle activated
+            var measurementData = {
+                visible: true,
+                active: true,
+                handles: {
+                    start: {
+                        x: mouseEventData.currentPoints.image.x,
+                        y: mouseEventData.currentPoints.image.y,
+                        highlight: true,
+                        active: false
+                    },
+                    end: {
+                        x: mouseEventData.currentPoints.image.x,
+                        y: mouseEventData.currentPoints.image.y,
+                        highlight: true,
+                        active: false
+                    },
+                    textBox: {
+                        x: mouseEventData.currentPoints.image.x - 50,
+                        y: mouseEventData.currentPoints.image.y - 50,
+                        active: false,
+                        movesIndependently: false,
+                        drawnIndependently: true,
+                        allowedOutsideImage: true,
+                        hasBoundingBox: true
+                    }
+                },
+                imageId: imageId,
+                seriesInstanceUid: seriesInstanceUid,
+                studyInstanceUid: studyInstanceUid,
+                patientId: patientId,
+                response: response,
+                isTarget: true,
+                toolType: toolType
+            };
+
+            return measurementData;
+        }
+        ///////// END ACTIVE TOOL ///////
+
+        function pointNearTool(element, data, coords) {
+            var lineSegment = {
+                start: cornerstone.pixelToCanvas(element, data.handles.start),
+                end: cornerstone.pixelToCanvas(element, data.handles.end)
+            };
+            var distanceToPoint = cornerstoneMath.lineSegment.distanceToPoint(lineSegment, coords);
+
+            if (cornerstoneTools.pointInsideBoundingBox(data.handles.textBox, coords)) {
+                return true;
+            }
+
+            return distanceToPoint < 25;
+        }
+
+        function drawDottedArrow(context, start, end, color, lineWidth) {
+            //variables to be used when creating the arrow
+            var headLength = 10;
+
+            var angle = Math.atan2(end.y - start.y, end.x - start.x);
+
+            //starting path of the arrow from the start square to the end square and drawing the stroke
+            context.beginPath();
+            context.moveTo(start.x, start.y);
+            context.lineTo(end.x, end.y);
+            context.strokeStyle = color;
+            context.lineWidth = lineWidth;
+            //context.setLineDash([ 2, 3 ]);
+            context.stroke();
+
+            //starting a new path from the head of the arrow to one of the sides of the point
+            context.beginPath();
+            context.moveTo(end.x, end.y);
+            context.lineTo(end.x - headLength * Math.cos(angle - Math.PI / 7), end.y - headLength * Math.sin(angle - Math.PI / 7));
+
+            //path from the side point of the arrow, to the other side point
+            context.lineTo(end.x - headLength * Math.cos(angle + Math.PI / 7), end.y - headLength * Math.sin(angle + Math.PI / 7));
+
+            //path from the side point back to the tip of the arrow, and then again to the opposite side point
+            context.lineTo(end.x, end.y);
+            context.lineTo(end.x - headLength * Math.cos(angle - Math.PI / 7), end.y - headLength * Math.sin(angle - Math.PI / 7));
+
+            //draws the paths created above
+            context.strokeStyle = color;
+            context.lineWidth = lineWidth;
+            context.stroke();
+            context.fillStyle = color;
+            context.fill();
+        }
+
+        ///////// BEGIN IMAGE RENDERING ///////
+        function onImageRendered(e, eventData) {
+            var element = eventData.element;
+
+            // if we have no toolData for this element, return immediately as there is nothing to do
+            var toolData = cornerstoneTools.getToolState(element, toolType);
+            if (!toolData) {
+                return;
+            }
+
+            // we have tool data for this element - iterate over each one and draw it
+            var context = eventData.canvasContext.canvas.getContext('2d');
+            context.setTransform(1, 0, 0, 1, 0, 0);
+
+            var color;
+            var lineWidth = cornerstoneTools.toolStyle.getToolWidth();
+            var font = cornerstoneTools.textStyle.getFont();
+            var config = cornerstoneTools[toolType].getConfiguration();
+
+            context.font = font;
+            for (var i = 0; i < toolData.data.length; i++) {
+                var data = toolData.data[i];
+
+                context.save();
+
+                // configurable shadow from CornerstoneTools
+                if (config && config.shadow) {
+                    context.shadowColor = '#000000';
+                    context.shadowOffsetX = 1;
+                    context.shadowOffsetY = 1;
+                }
+
+                if (data.active) {
+                    color = cornerstoneTools.toolColors.getActiveColor();
+                } else {
+                    color = cornerstoneTools.toolColors.getToolColor();
+                }
+
+                // Draw the arrow
+                var handleStartCanvas = cornerstone.pixelToCanvas(element, data.handles.start);
+                var handleEndCanvas = cornerstone.pixelToCanvas(element, data.handles.end);
+                var canvasTextLocation = cornerstone.pixelToCanvas(element, data.handles.textBox);
+
+                drawDottedArrow(context, handleEndCanvas, handleStartCanvas, color, lineWidth);
+
+                if (config.drawHandles) {
+                    cornerstoneTools.drawHandles(context, eventData, data.handles, color);
+                } else if (config.drawHandlesOnHover && data.handles.start.active) {
+                    cornerstoneTools.drawHandles(context, eventData, [ data.handles.start ], color);
+                } else if (config.drawHandlesOnHover && data.handles.end.active) {
+                    cornerstoneTools.drawHandles(context, eventData, [ data.handles.end ], color);
+                }
+
+                // Draw the text
+                if (data.lesionNumber) {
+                    // Draw linked line as dashed
+                    var mid = {
+                        x: (handleStartCanvas.x + handleEndCanvas.x) / 2,
+                        y: (handleStartCanvas.y + handleEndCanvas.y) / 2
+                    };
+
+                    context.beginPath();
+                    context.strokeStyle = color;
+                    context.lineWidth = lineWidth;
+                    context.setLineDash([ 2, 3 ]);
+
+                    context.moveTo(mid.x, mid.y);
+                    context.lineTo(canvasTextLocation.x + 20, canvasTextLocation.y + 20);
+                    context.stroke();
+
+                    var boundingBox = cornerstoneTools.drawTextBox(context, "Target " + + data.lesionNumber, canvasTextLocation.x, canvasTextLocation.y, color);
+                    data.handles.textBox.boundingBox = boundingBox;
+                }
+
+                context.restore();
+            }
+        }
+
+        // ---- Touch tool ----
+
+        ///////// BEGIN ACTIVE TOOL ///////
+        function addNewMeasurementTouch(touchEventData) {
+            var element = touchEventData.element;
+
+            function doneCallback(lesionNumber) {
+                measurementData.lesionNumber = lesionNumber;
+                measurementData.active = true;
+                cornerstone.updateImage(element);
+            }
+
+            var measurementData = createNewMeasurement(touchEventData);
+            cornerstoneTools.addToolState(element, toolType, measurementData);
+            $(element).off('CornerstoneToolsTouchDrag', cornerstoneTools[toolType+"Touch"].touchMoveHandle);
+            $(element).off('CornerstoneToolsDragStartActive',cornerstoneTools[toolType+"Touch"].touchDownActivateCallback);
+            $(element).off('CornerstoneToolsTap', cornerstoneTools[toolType+"Touch"].tapCallback);
+            var config = cornerstoneTools[toolType].getConfiguration();
+
+            // Set lesion number and lesion name
+            if (measurementData.lesionName === undefined) {
+                config.setLesionNumberCallback(measurementData, touchEventData, doneCallback);
+            }
+
+            cornerstone.updateImage(element);
+
+            cornerstoneTools.moveNewHandleTouch(touchEventData, toolType, measurementData, measurementData.handles.end, function() {
+                cornerstone.updateImage(element);
+
+                if (cornerstoneTools.anyHandlesOutsideImage(touchEventData, measurementData.handles)) {
+                    // delete the measurement
+                    cornerstoneTools.removeToolState(element, toolType, measurementData);
+                }
+
+                config.getLesionLocationCallback(measurementData, touchEventData, doneCallback);
+
+                $(element).on('CornerstoneToolsTouchDrag', cornerstoneTools[toolType+"Touch"].touchMoveHandle);
+                $(element).on('CornerstoneToolsDragStartActive', cornerstoneTools[toolType+"Touch"].touchDownActivateCallback);
+                $(element).on('CornerstoneToolsTap', cornerstoneTools[toolType+"Touch"].tapCallback);
+            });
+        }
+
+        function doubleClickCallback(e, eventData) {
+            var element = eventData.element;
+            var data;
+
+            function doneCallback(data, deleteTool) {
+                if (deleteTool === true) {
+                    cornerstoneTools.removeToolState(element, toolType, data);
+                    cornerstone.updateImage(element);
+                    return;
+                }
+
+                data.active = false;
+                cornerstone.updateImage(element);
+            }
+
+            if (e.data && e.data.mouseButtonMask && !cornerstoneTools.isMouseButtonEnabled(eventData.which, e.data.mouseButtonMask)) {
+                return false;
+            }
+
+            var config = cornerstoneTools[toolType].getConfiguration();
+
+            var coords = eventData.currentPoints.canvas;
+            var toolData = cornerstoneTools.getToolState(element, toolType);
+
+            // now check to see if there is a handle we can move
+            if (!toolData) {
+                return false;
+            }
+
+            for (var i = 0; i < toolData.data.length; i++) {
+                data = toolData.data[i];
+                if (pointNearTool(element, data, coords)) {
+                    data.active = true;
+                    cornerstone.updateImage(element);
+                    // Allow relabelling via a callback
+                    config.changeLesionLocationCallback(data, eventData, doneCallback);
+
+                    e.stopImmediatePropagation();
+                    return false;
+                }
+            }
+
+            return false; // false = causes jquery to preventDefault() and stopPropagation() this event
+        }
+
+
+        toolInterface.crunex = cornerstoneTools.mouseButtonTool({
+            addNewMeasurement: addNewMeasurement,
+            createNewMeasurement: createNewMeasurement,
+            onImageRendered: onImageRendered,
+            pointNearTool: pointNearTool,
+            toolType: toolType,
+            mouseDoubleClickCallback: doubleClickCallback
+        });
+
+        toolInterface.crunexTouch = cornerstoneTools.touchTool({
+            addNewMeasurement: addNewMeasurementTouch,
+            createNewMeasurement: createNewMeasurement,
+            onImageRendered: onImageRendered,
+            pointNearTool: pointNearTool,
+            toolType: toolType
+            // pressCallback: doubleClickCallback
+        });
+
+        return toolInterface;
+    }
+
+    cornerstoneTools.crunexTool = crunexTool;
+
+})($, cornerstone, cornerstoneMath, cornerstoneTools);

Packages/lesiontracker/client/compatibility/deleteLesionKeyboardTool.js

@@ -80,7 +80,7 @@
         if (keyCode === keys.DELETE ||
             (keyCode === keys.D && eventData.event.ctrlKey === true)) {
 
-            var toolTypes = [ 'lesion', 'nonTarget', 'length'];
+            var toolTypes = [ 'bidirectional', 'nonTarget', 'length', 'crTool', 'unTool', 'exTool'];
             var nearbyToolData = getNearbyToolData(eventData.element, eventData.currentPoints.canvas, toolTypes);
 
             if (!nearbyToolData) {

Packages/lesiontracker/client/compatibility/exTool.js

@@ -0,0 +1,9 @@
+(function($, cornerstone, cornerstoneMath, cornerstoneTools) {
+
+    'use strict';
+    var exToolInterface = cornerstoneTools.crunexTool('exTool');
+    cornerstoneTools.exTool = exToolInterface.crunex;
+    cornerstoneTools.exTool.setConfiguration(exToolInterface.defaultConfiguration);
+    cornerstoneTools.exToolTouch = exToolInterface.crunexTouch;
+
+})($, cornerstone, cornerstoneMath, cornerstoneTools);

Packages/lesiontracker/client/compatibility/nonTargetTool.js

@@ -154,7 +154,7 @@
             patientId: patientId,
             response: '',
             isTarget: false,
-            measurementType: 'nonTarget'
+            toolType: 'nonTarget'
         };
 
         return measurementData;

Packages/lesiontracker/client/compatibility/unTool.js

@@ -0,0 +1,9 @@
+(function($, cornerstone, cornerstoneMath, cornerstoneTools) {
+
+    'use strict';
+    var unToolInterface = cornerstoneTools.crunexTool('unTool');
+    cornerstoneTools.unTool = unToolInterface.crunex;
+    cornerstoneTools.unTool.setConfiguration(unToolInterface.defaultConfiguration);
+    cornerstoneTools.unToolTouch = unToolInterface.crunexTouch;
+
+})($, cornerstone, cornerstoneMath, cornerstoneTools);

Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js

@@ -115,6 +115,14 @@ changeLesionLocationCallback = function(measurementData, eventData, doneCallback
 
     // Get the lesion location dialog
     var dialog = $('#lesionLocationRelabelDialog');
+
+    // Show/Hide Convert To NonTarget option in lesionLocationRelabelDialog
+    if (measurementData.toolType === 'bidirectional') {
+        dialog.find("#convertToNonTarget").css("visibility", "visible");
+    } else {
+        dialog.find("#convertToNonTarget").css("visibility", "hidden");
+    }
+
     Template.lesionLocationDialog.dialog = dialog;
 
     // Show the backdrop
@@ -183,7 +191,17 @@ var config = {
     changeLesionLocationCallback: changeLesionLocationCallback
 };
 
-cornerstoneTools.lesion.setConfiguration(config);
+cornerstoneTools.bidirectional.setConfiguration(config);
+
+// Set CR-Tool, UN-Tool, EX-Tool configurations
+// Config for CR Tool
+cornerstoneTools.crTool.setConfiguration(config);
+
+// Config for EX Tool
+cornerstoneTools.exTool.setConfiguration(config);
+
+// Config for UN Tool
+cornerstoneTools.unTool.setConfiguration(config);
 
 Template.lesionLocationDialog.events({
     'change .selectLesionLocation': function(e) {

Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.html

@@ -1,6 +1,6 @@
 <template name="lesionTableTimepointCell">
     {{ #if hasDataAtThisTimepoint }}
-        {{ #if isTarget }}
+        {{ #if isBirectional }}
             <td class="lesionTableTimepointCell targetCell" tabindex="1">{{displayData}}</td>
         {{ else }}
             <td class="lesionTableTimepointCell nonTargetCell" tabindex="1">{{displayData}}</td>

Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.js

@@ -18,7 +18,7 @@ Template.lesionTableTimepointCell.helpers({
 
         var data = lesionData.timepoints[this.timepointId];
 
-        if (lesionData.isTarget === true) {
+        if (lesionData.toolType === 'bidirectional') {
             if (data.shortestDiameter) {
                 return data.longestDiameter + ' x ' + data.shortestDiameter;
             }
@@ -28,9 +28,13 @@ Template.lesionTableTimepointCell.helpers({
             return data.response;
         }
     },
-    isTarget: function() {
+
+    isBidirectional: function() {
         var lesionData = Template.parentData(1);
-        return lesionData.isTarget;
+        if (lesionData.toolType === 'bidirectional') {
+            return true;
+        }
+        return false
     }
 });
 

Packages/lesiontracker/client/components/studyAssociationTable/studyAssociationTable.html

@@ -3,7 +3,7 @@
         <div class="row">
             <div class="col-md-12">
                 <h4>Instructions</h4>
-                <p>Associate the selected studies with timepoints in the clinical trial.</p>
+                <p>Associate the selected studies with timepoints in the clinical trial. Only 1 follow-up time point can be associated at the same time.</p>
                 <p>We have automatically retrieved all studies within 14 days (<strong>{{formatDA earliestDate}}</strong> to <strong>{{formatDA latestDate}}</strong>) of your selected studies, in case you forgot to
                 select a study.</p>
             </div>

Packages/lesiontracker/lib/LesionManager.js

@@ -4,12 +4,16 @@ measurementValuesByType = {
         'longestDiameter'
     ],
     nonTarget: ['response'],
+    crTool: ['response'],
+    exTool: ['response'],
+    unTool: ['response'],
     length: ['length'],
     ellipticalRoi: [
         'area',
         'mean',
         'stdev'
     ]
+
 };
 
 /**
@@ -60,14 +64,14 @@ function updateLesionData(lesionData) {
         imageId: lesionData.imageId
     };
 
-    if (!lesionData.measurementType) {
+    if (!lesionData.toolType) {
         // For debugging, might want to switch to measurement types later
-        lesionData.measurementType = lesionData.isTarget ? 'bidirectional' : 'nonTarget';
+        lesionData.toolType = lesionData.isTarget ? 'bidirectional' : 'nonTarget';
     }
 
     // Populate this timepoint's data with whichever values
     // are stored for this Measurement type
-    var values = measurementValuesByType[lesionData.measurementType];
+    var values = measurementValuesByType[lesionData.toolType];
     values.forEach(function(valueName) {
         timepointData[valueName] = lesionData[valueName];
     });
@@ -80,8 +84,12 @@ function updateLesionData(lesionData) {
             lesionNumber: lesionData.lesionNumber,
             isTarget: lesionData.isTarget,
             patientId: lesionData.patientId,
-            id: lesionData.id
+            id: lesionData.id,
+            toolType: lesionData.toolType
         };
+        if (lesionData.toolType) {
+            measurement.toolType = lesionData.toolType;
+        }
 
         // Retrieve the location name given the locationUID
         if (lesionData.locationUID !== undefined) {

Packages/lesiontracker/lib/activateLesion.js

@@ -25,7 +25,7 @@ activateLesion = function(measurementId, templateData) {
         sort: {
             latestDate: 1
         }
-    })
+    });
 
     // Loop through each timepoint and populate the orderTimepointEntries array with
     // The measurement data at each timepoint. The most recent measurements will be first in
@@ -58,9 +58,11 @@ activateLesion = function(measurementId, templateData) {
         // Stop if we run out of timepoints before viewports
         if (viewportIndex >= orderedTimepointEntries.length) {
             // Update the element anyway, to remove any other highlights that are present
-            deactivateAllToolData(element, 'lesion');
+            deactivateAllToolData(element, 'bidirectional');
             deactivateAllToolData(element, 'nonTarget');
-            cornerstone.updateImage(element);
+            deactivateAllToolData(element, 'crTool');
+            deactivateAllToolData(element, 'unTool');
+            deactivateAllToolData(element, 'exTool');
 
             return false;
         }
@@ -79,8 +81,11 @@ activateLesion = function(measurementId, templateData) {
         // If there is no measurement data to display, stop here
         if (!measurementAtTimepoint) {
             // Update the element anyway, to remove any other highlights that are present
-            deactivateAllToolData(element, 'lesion');
+            deactivateAllToolData(element, 'bidirectional');
             deactivateAllToolData(element, 'nonTarget');
+            deactivateAllToolData(element, 'crTool');
+            deactivateAllToolData(element, 'unTool');
+            deactivateAllToolData(element, 'exTool');
             cornerstone.updateImage(element);
             return;
         }

Packages/lesiontracker/lib/activateMeasurements.js

@@ -57,10 +57,15 @@ activateMeasurements = function(element, measurementId, templateData, viewportIn
  * @param timepointId
  */
 function activateTool(element, measurementData, timepointId) {
-    deactivateAllToolData(element, 'lesion');
+    deactivateAllToolData(element, 'bidirectional');
     deactivateAllToolData(element, 'nonTarget');
 
-    var toolType = measurementData.isTarget ? 'lesion' : 'nonTarget';
+    // Deactivate CRUNEX Tools
+    deactivateAllToolData(element, 'crTool');
+    deactivateAllToolData(element, 'unTool');
+    deactivateAllToolData(element, 'exTool');
+
+    var toolType = measurementData.toolType;
     var toolData = cornerstoneTools.getToolState(element, toolType);
     if (!toolData) {
         return;

Packages/lesiontracker/lib/clearMeasurementTimepointData.js

@@ -8,7 +8,7 @@ clearMeasurementTimepointData = function(measurementId, timepointId) {
 
     // Clear the Measurement data for this timepoint
     var imageId = data.timepoints[timepointId].imageId;
-    var toolType = data.isTarget ? 'lesion' : 'nonTarget';
+    var toolType = data.toolType;
     removeToolDataWithMeasurementId(imageId, toolType, measurementId);
 
     // Update any viewports that are currently displaying this imageId

Packages/lesiontracker/lib/clearTools.js

@@ -1,6 +1,6 @@
 clearTools = function() {
     var patientId = Session.get('patientId');
-    var toolTypes = [ 'lesion', 'nonTarget', 'length', 'ellipticalRoi'];
+    var toolTypes = [ 'bidirectional', 'nonTarget', 'length', 'ellipticalRoi', 'crTool', 'unTool', 'exTool' ];
     var toolState = cornerstoneTools.globalImageIdSpecificToolStateManager.toolState;
     var toolStateKeys = Object.keys(toolState).slice(0);
 

Packages/lesiontracker/lib/convertToNonTarget.js

@@ -21,7 +21,7 @@ convertToNonTarget = function(measurementData) {
         studyInstanceUid: measurementData.studyInstanceUid,
         patientId: measurementData.patientId,
         isTarget: false,
-        measurementType: toolType
+        toolType: toolType
     };
     
     if (timepoint && timepoint.timepointType === 'baseline') {

Packages/lesiontracker/lib/handleMeasurementAdded.js

@@ -1,9 +1,12 @@
 handleMeasurementAdded = function(e, eventData) {
     var measurementData = eventData.measurementData;
 
-    switch (eventData.toolType) {
+    switch (measurementData.toolType) {
         case 'nonTarget':
-        case 'lesion':
+        case 'bidirectional':
+        case 'crTool':
+        case 'unTool':
+        case 'exTool':
             log.info('CornerstoneToolsMeasurementAdded');
             LesionManager.updateLesionData(measurementData);
             TrialResponseCriteria.validateDelayed(measurementData);
@@ -20,7 +23,7 @@ handleMeasurementAdded = function(e, eventData) {
             // Add the relevant metaData to this ImageMeasurement's toolData
             measurementData.clientId = ClientId;
             measurementData.imageId = imageId;
-            measurementData.measurementType = eventData.toolType;
+            measurementData.toolType = eventData.toolType;
             measurementData.patientId = study.patientId;
             measurementData.studyInstanceUid = study.studyInstanceUid;
             measurementData.seriesInstanceUid = series.seriesInstanceUid;

Packages/lesiontracker/lib/handleMeasurementModified.js

@@ -1,9 +1,11 @@
 handleMeasurementModified = function(e, eventData) {
     var measurementData = eventData.measurementData;
-
+    switch (measurementData.toolType) {
-    switch (eventData.toolType) {
         case 'nonTarget':
-        case 'lesion':
+        case 'bidirectional':
+        case 'crTool':
+        case 'unTool':
+        case 'exTool':
             log.info('CornerstoneToolsMeasurementModified');
             LesionManager.updateLesionData(measurementData);
             TrialResponseCriteria.validateDelayed(measurementData);
@@ -20,7 +22,7 @@ handleMeasurementModified = function(e, eventData) {
             // Add the relevant metaData to this ImageMeasurement's toolData
             measurementData.clientId = ClientId;
             measurementData.imageId = imageId;
-            measurementData.measurementType = eventData.toolType;
+            measurementData.toolType = eventData.toolType;
             measurementData.patientId = study.patientId;
             measurementData.studyInstanceUid = study.studyInstanceUid;
             measurementData.seriesInstanceUid = series.seriesInstanceUid;

Packages/lesiontracker/lib/handleMeasurementRemoved.js

@@ -3,7 +3,10 @@ handleMeasurementRemoved = function(e, eventData) {
 
     switch (eventData.toolType) {
         case 'nonTarget':
-        case 'lesion':
+        case 'bidirectional':
+        case 'crTool':
+        case 'unTool':
+        case 'exTool':
             log.info('CornerstoneToolsMeasurementRemoved');
 
             var measurement = Measurements.findOne(measurementData.id, {

Packages/lesiontracker/lib/pixelSpacingAutorunCheck.js

@@ -32,4 +32,16 @@ pixelSpacingAutorunCheck = function() {
         // Enable Lesion Buttons
         oncologyTools.prop('disabled', false);
     }
+
+    // Set disabled/enabled timepoint buttons
+    var imageId = enabledElement.image.imageId;
+    var study = cornerstoneTools.metaData.get('study', imageId);
+
+    // Find the relevant timepoint given the current study
+    var timepoint = Timepoints.findOne({
+        studyInstanceUids: {
+            $in: [study.studyInstanceUid]
+        }
+    });
+    setTimepointTools(timepoint);
 };

Packages/lesiontracker/lib/setTimepointActiveTool.js

@@ -1,10 +0,0 @@
-// If timepoint is baseline, sets lesion tool as active tool
-// Else sets default tool
-setTimepointActiveTool = function(timepoint) {
-    if ((timepoint.timepointType).toLowerCase() === "baseline") {
-        // Set active tool as lesion tool
-        toolManager.setActiveTool('lesion');
-    } else {
-        toolManager.setActiveTool(toolManager.getDefaultTool());
-    }
-};

Packages/lesiontracker/lib/syncImageMeasurementAndToolData.js

@@ -5,7 +5,7 @@ syncImageMeasurementAndToolData = function(measurement) {
     var toolState = cornerstoneTools.globalImageIdSpecificToolStateManager.toolState;
 
     var imageId = measurement.imageId;
-    var toolType = measurement.measurementType;
+    var toolType = measurement.toolType;
 
     // If no tool state exists for this imageId, create an empty object to store it
     if (!toolState[imageId]) {

Packages/lesiontracker/lib/syncMeasurementAndToolData.js

@@ -3,7 +3,7 @@ syncMeasurementAndToolData = function(measurement) {
 
     // Check what toolType we should be adding this to, based on the isTarget value
     // of the stored Measurement
-    var toolType = measurement.isTarget ? 'lesion' : 'nonTarget';
+    var toolType = measurement.toolType;
 
     // Loop through the timepoint data for this measurement
     Object.keys(measurement.timepoints).forEach(function(key) {
@@ -56,6 +56,7 @@ function syncTimepointDataWithToolData(measurement, timepointData, imageId, tool
             tool.visible = timepointData.visible;
             tool.isDeleted = timepointData.isDeleted;
             tool.handles = timepointData.handles;
+            tool.toolType = measurement.toolType;
             return false;
         });
 
@@ -82,6 +83,7 @@ function syncTimepointDataWithToolData(measurement, timepointData, imageId, tool
     tool.locationUID = measurement.locationUID;
     tool.patientId = measurement.patientId;
     tool.id = measurement._id;
+    tool.toolType = measurement.toolType;
 
     // Add the measurementData into the toolData for this imageId
     toolState[imageId][toolType].data.push(tool);

Packages/lesiontracker/lib/timepointAutoCheck.js

@@ -0,0 +1,28 @@
+// If timepoint is baseline, sets lesion tool as active tool
+setTimepointTools = function(timepoint) {
+
+    // Enabled tools for only follow-up tools
+    var fuTools = ["button#crunexTools"];
+    var fuToolsJQ = $("button#crunexTools");
+    var isDisabled = false;
+    if ((timepoint.timepointType).toLowerCase() === "baseline") {
+        // Set active tool as lesion tool
+        toolManager.setActiveTool('bidirectional');
+        isDisabled = true;
+    } else {
+        toolManager.setActiveTool(toolManager.getDefaultTool());
+        isDisabled = false;
+    }
+
+    toolManager.addDisabledTool({tools: fuTools, status: isDisabled});
+    fuToolsJQ.prop('disabled', isDisabled);
+};
+
+timepointAutoCheck = function(templateData) {
+    if (templateData && templateData.timepointIds) {
+        templateData.timepointIds.forEach(function(timepointId) {
+            var timepoint = Timepoints.findOne({timepointId: timepointId});
+            setTimepointTools(timepoint);
+        });
+    }
+};

Packages/lesiontracker/lib/toggleLesionTrackerTools.js

@@ -18,7 +18,7 @@ toggleLesionTrackerTools = function() {
             activate: [ 'deleteLesionKeyboardTool' ],
             deactivate: [],
             enable: [],
-            disable: [ 'lesion', 'nonTarget', 'scaleOverlayTool', 'length' ]
+            disable: [ 'bidirectional', 'nonTarget', 'scaleOverlayTool', 'length', 'crTool', 'unTool', 'exTool' ]
         };
 
         toolManager.setToolDefaultStates(toolDefaultStates);

Packages/lesiontracker/lib/worklist/worklistModification.js

@@ -33,9 +33,6 @@ function dblClickOnStudy(data) {
         return;
     }
 
-    // Set active tool for timepoint
-    setTimepointActiveTool(timepoint);
-
     // Add the Timepoint name to the Patient name to create the tab title
     title += ' ' + getTimepointName(timepoint);
 

Packages/lesiontracker/package.js

@@ -31,7 +31,7 @@ Package.onUse(function(api) {
     api.addFiles('client/collections/LocationResponses.js', 'client');
 
     // Additional Custom Cornerstone Tools for Lesion Tracker
-    api.addFiles('client/compatibility/lesionTool.js', 'client', {
+    api.addFiles('client/compatibility/bidirectionalTool.js', 'client', {
         bare: true
     });
     api.addFiles('client/compatibility/nonTargetTool.js', 'client', {
@@ -43,6 +43,19 @@ Package.onUse(function(api) {
     api.addFiles('client/compatibility/deleteLesionKeyboardTool.js', 'client', {
         bare: true
     });
+    api.addFiles('client/compatibility/crunexTool.js', 'client', {
+        bare: true
+    });
+    api.addFiles('client/compatibility/crTool.js', 'client', {
+        bare: true
+    });
+    api.addFiles('client/compatibility/unTool.js', 'client', {
+        bare: true
+    });
+    api.addFiles('client/compatibility/exTool.js', 'client', {
+        bare: true
+    });
+
 
     // Trial Criteria data validation (the Meteor package is currently out-of-date)
     api.addFiles('client/compatibility/validate.js', 'client', {
@@ -159,8 +172,7 @@ Package.onUse(function(api) {
     api.addFiles('lib/clearTools.js', 'client');
     api.addFiles('lib/calculateTotalLesionBurden.js', 'client');
     api.addFiles('lib/convertToNonTarget.js', 'client');
-    api.addFiles('lib/setTimepointActiveTool.js', 'client');
+    api.addFiles('lib/timepointAutoCheck.js', 'client');
-
 
     api.addFiles('lib/syncMeasurementAndToolData.js', 'client');
     api.addFiles('lib/syncImageMeasurementAndToolData.js', 'client');
@@ -192,7 +204,7 @@ Package.onUse(function(api) {
     api.export('getTrialCriteriaConstraints', 'client');
     api.export('calculateTotalLesionBurden', 'client');
     api.export('convertToNonTarget', 'client');
-    api.export('setTimepointActiveTool', 'client');
+    api.export('timepointAutoCheck', 'client');
 
 
     // Export global objects

Packages/viewerbase/client/components/viewer/toolbar/toolbar.html

@@ -16,6 +16,10 @@
             {{ #if includeHangingProtocolButtons }}
                 {{ >hangingProtocolButtons }}
             {{ /if }}
+
+            {{ #each btnGroup }}
+                {{ >toolbarGroupButton}}
+            {{ /each }}
         </div>
     </div>
 </template>

Packages/viewerbase/client/components/viewer/toolbar/toolbar.js

@@ -108,6 +108,17 @@ function getDefaultButtonData() {
     return buttonData;
 }
 
+function setButtonsDisability() {
+    var disabledTools = toolManager.getDisabledTool();
+    disabledTools.forEach(function(toolData) {
+        var tools = toolData.tools;
+        var status =  toolData.status;
+        tools.forEach(function(element) {
+            $(element).prop("disabled", status);
+        });
+    });
+}
+
 Template.toolbar.events({
     'click .imageViewerTool': function(e) {
         $(e.currentTarget).tooltip('hide');
@@ -146,6 +157,9 @@ Template.toolbar.onRendered(function() {
     // Enable tooltips for the layout button
     var extraTooltipButtons = $('[rel="tooltip"]');
     extraTooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
+
+    // Set disabled/enabled tool buttons that are set in toolManager
+    setButtonsDisability();
 });
 
 Template.toolbar.helpers({
@@ -172,5 +186,11 @@ Template.toolbar.helpers({
             return this.toolbarOptions.includeHangingProtocolButtons;
         }
         return true;
+    },
+    'btnGroup': function()  {
+        if (this.toolbarOptions && this.toolbarOptions.btnGroup !== undefined) {
+            return this.toolbarOptions.btnGroup;
+        }
+        return [];
     }
 });

Packages/viewerbase/client/components/viewer/toolbarGroupButton/toolbarGroupButton.html

@@ -0,0 +1,12 @@
+<template name="toolbarGroupButton">
+    <div id="toolbarGroupButton" class="btn-group">
+        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="{{id}}" title="{{title}}">
+            <i class="{{groupIcon}}"></i>
+        </button>
+        <div class="dropdown-menu">
+            {{#each tools}}
+                <div><a class="dropdown-item" href="#">{{> simpleToolbarButton}}</a></div>
+            {{/each}}
+        </div>
+    </div>
+</template>

Packages/viewerbase/client/components/viewer/toolbarGroupButton/toolbarGroupButton.styl

@@ -0,0 +1,14 @@
+#toolbarGroupButton
+  button
+    &.active, &:active
+      background-color: #3B678E
+
+  .dropdown-menu
+    background-color: black
+    border: solid 1px #333
+    padding: 5px
+    margin-top: 0
+
+    div
+      padding: 5px
+      float: left

Packages/viewerbase/lib/toolManager.js

@@ -1,5 +1,6 @@
 var activeTool = "wwwc";
 var defaultTool = "wwwc";
+var disabledTools = [];
 
 var tools = {};
 
@@ -218,5 +219,11 @@ toolManager = {
     },
     getDefaultTool: function() {
         return defaultTool;
+    },
+    addDisabledTool: function(toolData) {
+        disabledTools.push(toolData);
+    },
+    getDisabledTool: function() {
+        return disabledTools;
     }
 };

Packages/viewerbase/package.js

@@ -114,6 +114,11 @@ Package.onUse(function(api) {
     api.addFiles('client/components/basic/progressDialog/progressDialog.styl', 'client');
     api.addFiles('client/components/basic/progressDialog/progressDialog.js', 'client');
 
+    api.addFiles('client/components/viewer/toolbarGroupButton/toolbarGroupButton.html', 'client');
+    api.addFiles('client/components/viewer/toolbarGroupButton/toolbarGroupButton.styl', 'client');
+    api.addFiles('client/components/viewer/toolbarGroupButton/toolbarGroupButton.js', 'client');
+
+
     // Library functions
     api.addFiles('lib/accountsConfig.js', 'client');
     api.addFiles('lib/createStacks.js', 'client');