Integrate Cornerstone Tools v3 (#235) - WIP

- fix(stack-scroll): Activate mouse wheel and scrollbar stack scroll
- fix(touch): Activate pinch zoom, two-finger pan and three (or more) finger stack scroll

Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js

@@ -277,8 +277,8 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
             cornerstoneTools.playClip(element);
         }
 
-        // InstantiateTools on the new element.
-        toolManager.instantiateTools(element);
+        // Instantiate the tools
+        toolManager.instantiateTools();
 
         // Use the tool manager to enable the currently active tool for this
         // newly rendered element
@@ -656,17 +656,13 @@ Template.imageViewerViewport.onDestroyed(function() {
         return;
     }
 
-    // Disable mouse functions
-    cornerstoneTools.mouseInput.disable(element);
-    cornerstoneTools.touchInput.disable(element);
-    cornerstoneTools.mouseWheelInput.disable(element);
+    // Remove all tools for the destroyed element
+    toolManager.removeToolsForElement(element);
 
     OHIF.viewer.updateImageSynchronizer.remove(element);
 
     // Clear the stack prefetch data
-    let stackPrefetchData = cornerstoneTools.getToolState(element, 'stackPrefetch');
-    stackPrefetchData = [];
-    cornerstoneTools.stackPrefetch.disable(element);
+    cornerstoneTools.clearToolState(element, 'stackPrefetch');
 
     // Try to stop any currently playing clips
     // Otherwise the interval will continuously throw errors

Packages/ohif-viewerbase/client/lib/switchToImageByIndex.js

@@ -1,4 +1,7 @@
 import { viewportUtils } from './viewportUtils';
+import { cornerstoneTools } from 'meteor/ohif:cornerstone';
+
+const scrollToIndex = cornerstoneTools.import('util/scrollToIndex');
 
 /**
  * This function switches to an image given an element and the index of the image in the current stack
@@ -11,5 +14,5 @@ import { viewportUtils } from './viewportUtils';
  */
 export function switchToImageByIndex(newImageIdIndex) {
     var element = viewportUtils.getActiveViewportElement();
-    cornerstoneTools.scrollToIndex(element, newImageIdIndex);
+    scrollToIndex(element, newImageIdIndex);
 }

Packages/ohif-viewerbase/client/lib/toolManager.js

@@ -42,11 +42,12 @@ export const toolManager = {
             magnify: 'MagnifyTool',
             crosshairs: 'CrosshairsTool',
             stackScroll: 'StackScrollTool',
-            zoomTouchPinch: 'ZoomTouchPinchTool',
-            zoomMouseWheel: 'ZoomMouseWheelTool',
             ellipticalRoi: 'EllipticalRoiTool',
             rectangleRoi: 'RectangleRoiTool',
-            wwwcRegion: 'WwwcRegionTool'
+            wwwcRegion: 'WwwcRegionTool',
+            zoomTouchPinch: 'ZoomTouchPinchTool',
+            panMultiTouch: 'PanMultiTouchTool',
+            stackScrollMouseWheel: 'StackScrollMouseWheelTool'
         };
 
         initialized = true;
@@ -109,8 +110,6 @@ export const toolManager = {
             }
         }
 
-        toolManager.setAllToolsPassive();
-
         // Set active tools for the other buttons than this one
         switch(button) {
             case 'left':
@@ -146,20 +145,38 @@ export const toolManager = {
         Session.set('ToolManagerActiveToolUpdated', Random.id());
     },
 
-    setAllToolsPassive() {
-        cornerstoneTools.store.state.tools.forEach((tool) => {
-            cornerstoneTools.setToolPassive(tool.name)
-        });
-    },
-
     instantiateTools() {
+        // Instantiate all cornerstone tools for all enabled elements
         Object.keys(tools).forEach(toolName => {
             const apiTool = cornerstoneTools[tools[toolName]];
             if (apiTool) {
                 cornerstoneTools.addTool(apiTool, { name: toolName });
             }
         });
-        toolManager.setAllToolsPassive();
+
+        // Activate pinch zoom
+        cornerstoneTools.setToolActive('zoomTouchPinch', {
+            mouseButtonMask: 0,
+            isTouchActive: true
+        });
+
+        // Activate two-finger pan
+        cornerstoneTools.setToolActive('panMultiTouch', {
+            mouseButtonMask: 0,
+            isTouchActive: true
+        });
+
+        // Activate mouse wheel and three (or more) finger stack scroll
+        cornerstoneTools.setToolActive('stackScrollMouseWheel', {
+            mouseButtonMask: 0,
+            isTouchActive: true
+        });
+    },
+
+    removeToolsForElement(element) {
+        Object.keys(tools).forEach(toolName => {
+            cornerstoneTools.removeToolForElement(element, toolName);
+        });
     },
 
     getNearbyToolData() {