From 0a5feb9a0de765295da06f10f4088bcbd19abe9d Mon Sep 17 00:00:00 2001 From: Evren Ozkan Date: Mon, 29 Oct 2018 10:58:53 -0400 Subject: [PATCH] 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 --- .../client/lib/activateMeasurements.js | 4 +- .../imageViewerViewport.js | 14 +++---- .../client/lib/switchToImageByIndex.js | 5 ++- .../ohif-viewerbase/client/lib/toolManager.js | 41 +++++++++++++------ 4 files changed, 41 insertions(+), 23 deletions(-) diff --git a/Packages/ohif-measurements/client/lib/activateMeasurements.js b/Packages/ohif-measurements/client/lib/activateMeasurements.js index 3b480f18e..abc1b03e4 100644 --- a/Packages/ohif-measurements/client/lib/activateMeasurements.js +++ b/Packages/ohif-measurements/client/lib/activateMeasurements.js @@ -2,6 +2,8 @@ import { $ } from 'meteor/jquery'; import { cornerstone, cornerstoneTools } from 'meteor/ohif:cornerstone'; import { OHIF } from 'meteor/ohif:core'; +const scrollToIndex = cornerstoneTools.import('util/scrollToIndex'); + /** * Activates a specific tool data instance and deactivates all other * target and non-target measurement data @@ -76,7 +78,7 @@ OHIF.measurements.activateMeasurements = (element, measurementData) => { // If we aren't currently displaying the image that this tool is on, // scroll to it now. if (currentImageId !== imageId) { - cornerstoneTools.scrollToIndex(element, imageIdIndex); + scrollToIndex(element, imageIdIndex); } const $element = $(element); diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js b/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js index 665fbdeab..211555a72 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js +++ b/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js @@ -267,8 +267,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 @@ -646,17 +646,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 diff --git a/Packages/ohif-viewerbase/client/lib/switchToImageByIndex.js b/Packages/ohif-viewerbase/client/lib/switchToImageByIndex.js index 753b3519d..8daef3181 100644 --- a/Packages/ohif-viewerbase/client/lib/switchToImageByIndex.js +++ b/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); } diff --git a/Packages/ohif-viewerbase/client/lib/toolManager.js b/Packages/ohif-viewerbase/client/lib/toolManager.js index 1f40675d1..60fc3db22 100644 --- a/Packages/ohif-viewerbase/client/lib/toolManager.js +++ b/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() {