Added support for multi-frame images (e.g. ultrasound). Updated cornerstoneTools with mouseClick bug fix

Packages/cornerstone/client/cornerstoneTools.js

@@ -1,4 +1,4 @@
-/*! cornerstoneTools - v0.7.7 - 2015-11-25 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstoneTools */
+/*! cornerstoneTools - v0.7.7 - 2015-11-26 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstoneTools */
 // Begin Source: src/header.js
 if (typeof cornerstone === 'undefined') {
     cornerstone = {};
@@ -2747,6 +2747,7 @@ if (typeof cornerstoneTools === 'undefined') {
     function mouseUpCallback(e, eventData) {
         $(eventData.element).off('CornerstoneToolsMouseDrag', dragCallback);
         $(eventData.element).off('CornerstoneToolsMouseUp', mouseUpCallback);
+        $(eventData.element).off('CornerstoneToolsMouseClick', mouseUpCallback);
         cornerstone.updateImage(eventData.element);
     }
 
@@ -2754,6 +2755,7 @@ if (typeof cornerstoneTools === 'undefined') {
         if (cornerstoneTools.isMouseButtonEnabled(eventData.which, e.data.mouseButtonMask)) {
             $(eventData.element).on('CornerstoneToolsMouseDrag', dragCallback);
             $(eventData.element).on('CornerstoneToolsMouseUp', mouseUpCallback);
+            $(eventData.element).on('CornerstoneToolsMouseClick', mouseUpCallback);
             cornerstoneTools.dragProbe.strategy(eventData);
             return false; // false = causes jquery to preventDefault() and stopPropagation() this event
         }
@@ -4214,12 +4216,14 @@ if (typeof cornerstoneTools === 'undefined') {
     function mouseUpCallback(e, eventData) {
         $(eventData.element).off('CornerstoneToolsMouseDrag', dragCallback);
         $(eventData.element).off('CornerstoneToolsMouseUp', mouseUpCallback);
+        $(eventData.element).off('CornerstoneToolsMouseClick', mouseUpCallback);
     }
 
     function mouseDownCallback(e, eventData) {
         if (cornerstoneTools.isMouseButtonEnabled(eventData.which, e.data.mouseButtonMask)) {
             $(eventData.element).on('CornerstoneToolsMouseDrag', dragCallback);
             $(eventData.element).on('CornerstoneToolsMouseUp', mouseUpCallback);
+            $(eventData.element).on('CornerstoneToolsMouseClick', mouseUpCallback);
             return false; // false = causes jquery to preventDefault() and stopPropagation() this event
         }
     }
@@ -4628,12 +4632,14 @@ if (typeof cornerstoneTools === 'undefined') {
     function mouseUpCallback(e, eventData) {
         $(eventData.element).off('CornerstoneToolsMouseDrag', dragCallback);
         $(eventData.element).off('CornerstoneToolsMouseUp', mouseUpCallback);
+        $(eventData.element).off('CornerstoneToolsMouseClick', mouseUpCallback);
     }
 
     function mouseDownCallback(e, eventData) {
         if (cornerstoneTools.isMouseButtonEnabled(eventData.which, e.data.mouseButtonMask)) {
             $(eventData.element).on('CornerstoneToolsMouseDrag', dragCallback);
             $(eventData.element).on('CornerstoneToolsMouseUp', mouseUpCallback);
+            $(eventData.element).on('CornerstoneToolsMouseClick', mouseUpCallback);
             return false; // false = causes jquery to preventDefault() and stopPropagation() this event
         }
     }
@@ -5286,12 +5292,14 @@ if (typeof cornerstoneTools === 'undefined') {
     function mouseUpCallback(e, eventData) {
         $(eventData.element).off('CornerstoneToolsMouseDrag', mouseDragCallback);
         $(eventData.element).off('CornerstoneToolsMouseUp', mouseUpCallback);
+        $(eventData.element).off('CornerstoneToolsMouseClick', mouseUpCallback);
     }
 
     function mouseDownCallback(e, eventData) {
         if (cornerstoneTools.isMouseButtonEnabled(eventData.which, e.data.mouseButtonMask)) {
             $(eventData.element).on('CornerstoneToolsMouseDrag', mouseDragCallback);
             $(eventData.element).on('CornerstoneToolsMouseUp', mouseUpCallback);
+            $(eventData.element).on('CornerstoneToolsMouseClick', mouseUpCallback);
             return false; // false = cases jquery to preventDefault() and stopPropagation() this event
         }
     }
@@ -5853,6 +5861,7 @@ if (typeof cornerstoneTools === 'undefined') {
     function mouseUpCallback(e, eventData) {
         $(eventData.element).off('CornerstoneToolsMouseDrag', dragCallback);
         $(eventData.element).off('CornerstoneToolsMouseUp', mouseUpCallback);
+        $(eventData.element).off('CornerstoneToolsMouseClick', mouseUpCallback);
     }
 
     function mouseDownCallback(e, eventData) {
@@ -5860,6 +5869,7 @@ if (typeof cornerstoneTools === 'undefined') {
             startPoints = eventData.startPoints; // Used for translateStrategy
             $(eventData.element).on('CornerstoneToolsMouseDrag', dragCallback);
             $(eventData.element).on('CornerstoneToolsMouseUp', mouseUpCallback);
+            $(eventData.element).on('CornerstoneToolsMouseClick', mouseUpCallback);
             return false; // false = cases jquery to preventDefault() and stopPropagation() this event
         }
     }
@@ -7766,6 +7776,7 @@ Display scroll progress bar across bottom of image.
     function mouseUpCallback(e, eventData) {
         $(eventData.element).off('CornerstoneToolsMouseDrag', dragCallback);
         $(eventData.element).off('CornerstoneToolsMouseUp', mouseUpCallback);
+        $(eventData.element).off('CornerstoneToolsMouseClick', mouseUpCallback);
     }
 
     function mouseDownCallback(e, eventData) {
@@ -7775,6 +7786,7 @@ Display scroll progress bar across bottom of image.
             };
             $(eventData.element).on('CornerstoneToolsMouseDrag', mouseDragEventData, dragCallback);
             $(eventData.element).on('CornerstoneToolsMouseUp', mouseUpCallback);
+            $(eventData.element).on('CornerstoneToolsMouseClick', mouseUpCallback);
             e.stopImmediatePropagation();
             return false;
         }
@@ -9589,6 +9601,7 @@ Display scroll progress bar across bottom of image.
     function mouseUpCallback(e, eventData) {
         $(eventData.element).off('CornerstoneToolsMouseDrag', mouseDragCallback);
         $(eventData.element).off('CornerstoneToolsMouseUp', mouseUpCallback);
+        $(eventData.element).off('CornerstoneToolsMouseClick', mouseUpCallback);
     }
 
     function mouseDownCallback(e, eventData) {
@@ -9600,6 +9613,7 @@ Display scroll progress bar across bottom of image.
             };
             $(eventData.element).on('CornerstoneToolsMouseDrag', mouseDragEventData, mouseDragCallback);
             $(eventData.element).on('CornerstoneToolsMouseUp', mouseUpCallback);
+            $(eventData.element).on('CornerstoneToolsMouseClick', mouseUpCallback);
             e.stopImmediatePropagation();
             return false;
         }

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

@@ -97,9 +97,9 @@ function loadSeriesIntoViewport(data) {
     // into the viewport overlays, and to calculate reference lines and orientation markers
     var series = data.series;
     var numImages = series.instances.length;
+    var imageId;
+
     series.instances.forEach(function(instance, imageIndex) {
-        var imageId = getImageId(instance);
-        imageIds.push(imageId);
         var metaData = {
             instance: instance,
             series: series,
@@ -108,7 +108,20 @@ function loadSeriesIntoViewport(data) {
             imageIndex: imageIndex + 1
         };
 
-        addMetaData(imageId, metaData);
+        var numFrames = instance.numFrames;
+        if (numFrames > 1) {
+            log.info('Multiframe image detected');
+            for (var i = 0; i < numFrames; i++) {
+                metaData.frame = i;
+                imageId = getImageId(instance, i);
+                imageIds.push(imageId);
+                addMetaData(imageId, metaData);
+            }
+        } else {
+            imageId = getImageId(instance);
+            imageIds.push(imageId);
+            addMetaData(imageId, metaData);
+        }
     });
 
     // Define the current image stack using the newly created image IDs

Packages/viewerbase/lib/getImageId.js

@@ -4,13 +4,20 @@
  * @param instance
  * @returns {string} The imageId to be used by Cornerstone
  */
-getImageId = function(instance) {
+getImageId = function(instance, frame) {
     if (!instance) {
         return;
     }
+
     if (instance.wadouri) {
-        return 'dicomweb:' + instance.wadouri; // WADO-URI
+        var imageId = 'dicomweb:' + instance.wadouri; // WADO-URI;
+        if (frame !== undefined) {
+            imageId += '&frame=' + frame;
+        }
+
+        return imageId;
     } else {
+        // TODO= Check multiframe image support with WADO-RS
         return getWADORSImageId(instance); // WADO-RS Retrieve Frame
     }
 };

Packages/viewerbase/server/services/wado/retrieveMetadata.js

@@ -104,6 +104,8 @@ function resultDataToStudyMetadata(server, studyInstanceUid, resultData) {
             sourceImageInstanceUid: getSourceImageInstanceUid(instance),
             laterality: DICOMWeb.getString(instance['00200062']),
             viewPosition: DICOMWeb.getString(instance['00185101']),
+            numFrames: DICOMWeb.getNumber(instance['00280008']),
+            frameRate: DICOMWeb.getNumber(instance['00181063'])
         };
 
         if (server.imageRendering === 'wadouri') {