Added magnify, window by region, and arrow annotation tools

Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js

@@ -341,6 +341,13 @@ Meteor.startup(function() {
             Session.set('CornerstoneThumbnailLoadProgress' + thumbnailIndex, eventData.percentComplete);
         });
     });
+
+    var config = {
+        magnifySize: 300,
+        magnificationLevel: 3
+    };
+
+    cornerstoneTools.magnify.setConfiguration(config);
 });
 
 Template.imageViewerViewport.onRendered(function() {

Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.styl

@@ -20,4 +20,22 @@
   right: 0
   left: 0
   margin: auto
-  height: 20px
+  height: 20px
+  
+/* These are some good CSS settings for a circular magnifying glass 
+   Try removing the border-radius to make a square magnifying glass */
+.magnifyTool{
+    border: 4px white solid;
+    box-shadow: 2px 2px 10px #1e1e1e;
+    border-radius: 50%;
+    display: none;
+    cursor: none;
+}
+/* prevents selection when left click dragging */
+.disable-selection {
+    -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
+}
+/* prevents cursor from changing to the i bar on the overlays*/
+.noIbar {
+    cursor:default;
+}

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

@@ -8,6 +8,27 @@ function getDefaultButtonData() {
         iconClasses: 'fa fa-sun-o'
     });
 
+    buttonData.push({
+        id: 'wwwcRegion',
+        title: 'Window by Region',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-square'
+    });
+
+    buttonData.push({
+        id: 'magnify',
+        title: 'Magnify',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-circle'
+    });
+
+    buttonData.push({
+        id: 'annotate',
+        title: 'Annotation',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-arrows-h'
+    });
+
     buttonData.push({
         id: 'invert',
         title: 'Invert',