OHIF-125: Fix Exception caused by Cornerstone Tools when sending empty viewports and/or not DOM elements to its functions

Packages/viewerbase/lib/displayReferenceLines.js

@@ -7,13 +7,13 @@ import { OHIF } from 'meteor/ohif:core';
  *
  * @param element {node} DOM Node representing the viewport element
  */
-displayReferenceLines = function(element) {
+displayReferenceLines = element => {
     log.info("imageViewerViewport displayReferenceLines");
 
     // Check if image plane (orientation / loction) data is present for the current image
-    var enabledElement = cornerstone.getEnabledElement(element);
+    const enabledElement = cornerstone.getEnabledElement(element);
-    var imageId = enabledElement.image.imageId;
+    const imageId = enabledElement.image.imageId;
-    var imagePlane = cornerstoneTools.metaData.get('imagePlane', imageId);
+    const imagePlane = cornerstoneTools.metaData.get('imagePlane', imageId);
 
     if (!OHIF.viewer.refLinesEnabled || !imagePlane || !imagePlane.frameOfReferenceUID) {
         return;
@@ -23,19 +23,21 @@ displayReferenceLines = function(element) {
     cornerstoneTools.referenceLines.tool.disable(element);
 
     // Loop through all other viewport elements and enable reference lines
-    $('.imageViewerViewport').not(element).each(function(index, element) {
+    $('.imageViewerViewport').not(element).each((index, viewportElement) => {
-        var imageId;
+        let imageId;
-        try {
+        if($(viewportElement).find('canvas').length) {
-            var enabledElement = cornerstone.getEnabledElement(element);
+            try {
-            imageId = enabledElement.image.imageId;
+                const enabledElement = cornerstone.getEnabledElement(viewportElement);
-        } catch(error) {
+                imageId = enabledElement.image.imageId;
-            return;
+            } catch(error) {
-        }
+                return;
+            }
 
-        if (!imageId || !$(this).find('canvas').length) {
+            if (!imageId) {
-            return;
+                return;
-        }
+            }
 
-        cornerstoneTools.referenceLines.tool.enable(element, OHIF.viewer.updateImageSynchronizer);
+            cornerstoneTools.referenceLines.tool.enable(viewportElement, OHIF.viewer.updateImageSynchronizer);
+        }
     });
 };

Packages/viewerbase/lib/enablePrefetchOnElement.js

@@ -16,7 +16,7 @@ enablePrefetchOnElement = function(element) {
     });
 
     // Make sure there is a stack to fetch
-    var stack = cornerstoneTools.getToolState(element, 'stack');
+    const stack = cornerstoneTools.getToolState(element, 'stack');
     if (stack && stack.data.length && stack.data[0].imageIds.length > 1) {
         cornerstoneTools.stackPrefetch.enable(element);
     }

Packages/viewerbase/lib/setActiveViewport.js

@@ -1,9 +1,10 @@
-setActiveViewport = function(element) {
+setActiveViewport = element => {
     if (!element) {
         return;
     }
 
-    var viewportIndex = $('.imageViewerViewport').index(element);
+    const viewportIndex = $('.imageViewerViewport').index(element);
+    const jQueryElement = $(element);
 
     // When an ActivateViewport event is fired, update the Meteor Session
     // with the viewport index that it was fired from.
@@ -14,15 +15,21 @@ setActiveViewport = function(element) {
 
     // Add the 'active' class to the parent container to highlight the active viewport
     $('#imageViewerViewports .viewportContainer').removeClass('active');
-    $(element).parents('.viewportContainer').addClass('active');
+    jQueryElement.parents('.viewportContainer').addClass('active');
 
     // Finally, enable stack prefetching and hide the reference lines from
-    // the newly activated viewport
+    // the newly activated viewport that has a canvas
-    enablePrefetchOnElement(element);
+
-    displayReferenceLines(element);
+    if (jQueryElement.find('canvas').length) {
+        // Cornerstone Tools compare DOM elements (check getEnabledElement cornerstone function)
+        // so we can't pass a jQuery object as an argument, otherwise it throws an excepetion
+        const domElement = jQueryElement.get(0);
+        enablePrefetchOnElement(domElement);
+        displayReferenceLines(domElement);
+    }
 
     // Set the div to focused, so keypress events are handled
     //$(element).focus();
     //.focus() event breaks in FF&IE
-    $(element).triggerHandler('focus');
+    jQueryElement.triggerHandler('focus');
 };

Packages/viewerbase/lib/viewportFunctions.js

@@ -145,7 +145,8 @@ isPlaying = () => {
 
     // Get the viewport element and its current playClip tool state
     const element = getActiveViewportElement();
-    if (!element) {
+    // Empty Elements throws cornerstore exception
+    if (!element || !$(element).find('canvas').length) {
         return;
     }