Test OHIF Viewer against Cornerstone* version 2.0.0

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

@@ -273,7 +273,9 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
 
         // Define a function to run whenever the Cornerstone viewport is rendered
         // (e.g. following a change of window or zoom)
-        const onImageRendered = (event, eventData) => {
+        const onImageRendered = (event) => {
+            const eventData = event.detail;
+
             // Attention: Adding OHIF.log.info in this function may decrease the performance
             // since this callback function is called multiple times (eg: when a tool is
             // enabled/disabled -> cornerstone[toolName].tool.enable)
@@ -298,15 +300,17 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
         };
 
         // Attach the onImageRendered callback to the CornerstoneImageRendered event
-        $element.off('CornerstoneImageRendered', onImageRendered);
-        $element.on('CornerstoneImageRendered', onImageRendered);
+        element.removeEventListener('cornerstoneimagerendered', onImageRendered);
+        element.addEventListener('cornerstoneimagerendered', onImageRendered);
 
         // Set a random value for the Session variable in order to trigger an overlay update
         Session.set('CornerstoneImageRendered' + viewportIndex, Math.random());
 
         // Define a function to run whenever the Cornerstone viewport changes images
         // (e.g. during scrolling)
-        const onNewImage = (event, eventData) => {
+        const onNewImage = (event) => {
+            const eventData = event.detail;
+
             // Attention: Adding OHIF.log.info in this function may decrease the performance
             // since this callback function is called multiple times (eg: when a tool is
             // enabled/disabled -> cornerstone[toolName].tool.enable)
@@ -349,13 +353,13 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
         };
 
         // Attach the onNewImage callback to the CornerstoneNewImage event
-        $element.off('CornerstoneNewImage', onNewImage);
-        $element.on('CornerstoneNewImage', onNewImage);
+        element.removeEventListener('cornerstonenewimage', onNewImage);
+        element.addEventListener('cornerstonenewimage', onNewImage);
 
         // Set a random value for the Session variable in order to trigger an overlay update
         Session.set('CornerstoneNewImage' + viewportIndex, Math.random());
 
-        const onStackScroll = (e, eventData) => {
+        const onStackScroll = () => {
             // Attention: Adding OHIF.log.info in this function may decrease the performance
             // since this callback function is called multiple times (eg: when a tool is
             // enabled/disabled -> cornerstone[toolName].tool.enable)
@@ -364,9 +368,9 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
             Session.set('CornerstoneNewImage' + viewportIndex, Math.random());
         };
 
-        $element.off('CornerstoneStackScroll', onStackScroll);
+        element.removeEventListener('cornerstonestackscroll', onStackScroll);
         if (stack.imageIds.length > 1) {
-            $element.on('CornerstoneStackScroll', onStackScroll);
+            element.addEventListener('cornerstonestackscroll', onStackScroll);
         }
 
         // Define a function to trigger an event whenever a new viewport is being used
@@ -578,14 +582,14 @@ Template.imageViewerViewport.onRendered(function() {
     setDisplaySet(data, displaySetInstanceUid, templateData);
 
     // Double click event handlers to handle viewport enlargement
-    this.$element.on('CornerstoneToolsMouseDoubleClick CornerstoneToolsDoubleTap', event => {
+    function doubleClickHandler (event) {
         const { layoutManager } = OHIF.viewerbase;
         const $viewports = $('.imageViewerViewport');
 
-        this.$element.trigger('ohif.viewer.viewport.toggleEnlargement');
+        $element.trigger('ohif.viewer.viewport.toggleEnlargement');
 
         // Get the double clicked viewport index
-        const viewportIndex = $('.imageViewerViewport').index(event.currentTarget);
+        const viewportIndex = $viewports.index(event.currentTarget);
 
         // Stop here if there's only one viewport
         if (!layoutManager.isZoomed && $viewports.length <= 1) return;
@@ -608,6 +612,12 @@ Template.imageViewerViewport.onRendered(function() {
             const element = $('.imageViewerViewport').get(viewportIndexToZoom);
             setActiveViewport(element);
         });
+    }
+
+    const doubleClickEvents = ['cornerstonetoolsmousedoubleclick', 'cornerstonetoolsdoubletap'];
+    doubleClickEvents.forEach(eventType => {
+        element.removeEventListener(eventType, doubleClickHandler);
+        element.addEventListener(eventType, doubleClickHandler);
     });
 });
 

Packages/ohif-viewerbase/client/lib/classes/StudyLoadingListener.js

@@ -216,14 +216,16 @@ class StackLoadingListener extends BaseLoadingListener {
     _checkCachedData() {
         const imageIds = this.stack.imageIds;
 
-        for(let i = 0; i < imageIds.length; i++) {
+        // TODO: No way to check status of Promise.
+        /*for(let i = 0; i < imageIds.length; i++) {
             const imageId = imageIds[i];
+
             const imagePromise = cornerstone.imageCache.getImagePromise(imageId);
 
             if (imagePromise && (imagePromise.state() === 'resolved')) {
                 this._updateFrameStatus(imageId, true);
             }
-        }
+        }*/
     }
 
     _getImageLoadedEventName() {

Packages/ohif-viewerbase/client/lib/classes/StudyPrefetcher.js

@@ -10,16 +10,17 @@ import { getImageId } from '../getImageId.js';
 export class StudyPrefetcher {
 
     constructor(studies) {
-        this.studies = [];
+        this.studies = studies || [];
         this.prefetchDisplaySetsTimeout = 300;
         this.lastActiveViewportElement = null;
+        this.cacheFullHandlerBound = _.bind(this.cacheFullHandler, this);
 
-        $(cornerstone.events).on('CornerstoneImageCacheFull.StudyPrefetcher', _.bind(this.cacheFullHandler, this));
+        cornerstone.events.addEventListener('cornerstoneimagecachefull.StudyPrefetcher', this.cacheFullHandlerBound);
     }
 
     destroy() {
         this.stopPrefetching();
-        $(cornerstone.events).off('CornerstoneImageCacheFull.StudyPrefetcher');
+        cornerstone.events.removeEventListener('cornerstoneimagecachefull.StudyPrefetcher', this.cacheFullHandlerBound);
     }
 
     static getInstance() {
@@ -99,19 +100,22 @@ export class StudyPrefetcher {
     }
 
     attachActiveViewportListeners(activeViewportElement) {
-        const newImageHandler = () => {
+        function newImageHandler() {
             // It needs to be called asynchronously because cornerstone does it at the same way.
             // All instance urls to be prefetched will be removed again if we add them before
             // Cornerstone callback (see stackPrefetch.onImageUpdated).
-            this.prefetchDisplaySetsAsync();
-        };
+            StudyPrefetcher.prefetchDisplaySetsAsync();
+        }
 
-        $(this.lastActiveViewportElement).off('CornerstoneNewImage.StudyPrefetcher');
-        $(activeViewportElement).off('CornerstoneNewImage.StudyPrefetcher');
+        if (this.lastActiveViewportElement) {
+            this.lastActiveViewportElement.removeEventListener('cornerstonenewimage.StudyPrefetcher', newImageHandler);
+        }
+
+        activeViewportElement.removeEventListener('cornerstonenewimage.StudyPrefetcher', newImageHandler);
 
         // Cornerstone will not attach an event listener if the element doesn't have a stack
         if (this.hasStack(activeViewportElement)) {
-            $(activeViewportElement).on('CornerstoneNewImage.StudyPrefetcher', newImageHandler);
+            activeViewportElement.addEventListener('cornerstonenewimage.StudyPrefetcher', newImageHandler);
         }
 
         this.lastActiveViewportElement = activeViewportElement;
@@ -303,8 +307,8 @@ export class StudyPrefetcher {
     }
 
     isImageCached(imageId) {
-        const imagePromise = cornerstone.imageCache.getImagePromise(imageId);
-        return imagePromise && (imagePromise.state() === 'resolved');
+        const image = cornerstone.imageCache.imageCache[imageId];
+        return image && image.sizeInBytes;
     }
 
     cacheFullHandler() {

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

@@ -246,18 +246,23 @@ export const toolManager = {
     },
 
     configureLoadProcess() {
-        // Whenever the CornerstoneImageLoadProgress is fired, identify which viewports
+        // Whenever CornerstoneImageLoadProgress is fired, identify which viewports
         // the "in-progress" image is to be displayed in. Then pass the percent complete
         // via the Meteor Session to the other templates to be displayed in the relevant viewports.
-        $(cornerstone.events).on('CornerstoneImageLoadProgress', (e, eventData) => {
-            viewportIndices = this.getKeysByValue(window.ViewportLoading, eventData.imageId);
+
+        function handleLoadProgress (e) {
+            const eventData = e.detail;
+            const viewportIndices = toolManager.getKeysByValue(window.ViewportLoading, eventData.imageId);
             viewportIndices.forEach(viewportIndex => {
                 Session.set('CornerstoneLoadProgress' + viewportIndex, eventData.percentComplete);
             });
 
             const encodedId = OHIF.string.encodeId(eventData.imageId);
             Session.set('CornerstoneThumbnailLoadProgress' + encodedId, eventData.percentComplete);
-        });
+        }
+
+        cornerstone.events.removeEventListener('cornerstoneimageloadprogress', handleLoadProgress);
+        cornerstone.events.addEventListener('cornerstoneimageloadprogress', handleLoadProgress);
     },
 
     setGestures(newGestures) {

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

@@ -360,7 +360,9 @@ const isStackScrollLinkingActive = () => {
 };
 
 // Create an event listener to update playing state when a clip stops playing
-$(window).on('CornerstoneToolsClipStopped', () => Session.set('UpdateCINE', Math.random()));
+window.addEventListener('cornerstonetoolsclipstopped', () => {
+    Session.set('UpdateCINE', Math.random());
+});
 
 /**
  * Export functions inside viewportUtils namespace.