feat(plugins): Add initial version of ViewportPlugin class (#242)

* Add initial version of ViewportPlugin class
* Move entrypoints from OHIFPlugin to OHIF.plugins
* Add URL route to DICOMWeb server for Standalone Viewer

Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html

@@ -1,10 +1,16 @@
 <template name="gridLayout">
     <div id='imageViewerViewports'>
         {{#each viewport in viewports}}
-            <div class="viewportContainer {{getClass @index}}" style="height:{{height}}%;width:{{width}}%;">
-                <div class="removable">
-                    {{>imageViewerViewport (clone viewport)}}
-                </div>
+            <div class="viewportContainer {{getClass @index}} {{ activeClass @index }}" style="height:{{height}}%;width:{{width}}%;">
+                {{ #if eq viewport.plugin 'cornerstone'}}
+                    <div class="removable">
+                        {{>imageViewerViewport (clone viewport)}}
+                    </div>
+                {{ else }}
+                    <div class="viewport-plugin-{{viewport.plugin}}"
+                        style="height:100%; width: 100%">
+                    </div>
+                {{ /if }}
                 {{>seriesQuickSwitch (clone this viewport=viewport viewportIndex=@index)}}
             </div>
         {{/each}}

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

@@ -30,7 +30,7 @@ Template.gridLayout.helpers({
         }
 
         const actualRow = Math.floor(index / columns);
-            
+
         if ( actualRow === 0 ) {
             return TOP_CLASS;
         }
@@ -40,7 +40,13 @@ Template.gridLayout.helpers({
 
         return MIDDLE_CLASS;
     },
-    
+
+    activeClass(index) {
+        if (Session.get('activeViewport') === index) {
+            return 'active';
+        };
+    },
+
     // Return the viewports list
     viewports() {
         const instance = Template.instance();

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

@@ -65,8 +65,8 @@ Template.imageControls.events({
             // Using the slider in an inactive viewport
             // should cause that viewport to become active
             const $slider = $(event.currentTarget);
-            const newActiveElement = $slider.parents('.viewportContainer').find('.imageViewerViewport');
-            setActiveViewport(newActiveElement);
+            const viewportContainer = $slider.parents('.viewportContainer');
+            setActiveViewport(viewportContainer);
 
             // Subtract 1 here since the slider goes from 1 to N images
             // But the stack indexing starts at 0

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

@@ -21,6 +21,8 @@ const allCornerstoneEvents = ['click', 'cornerstonetoolsmousedown', 'cornerstone
     'cornerstonetoolsmousewheel', 'cornerstonetoolsdoubletap', 'cornerstonetoolstouchpress',
     'cornerstonetoolsmultitouchstart', 'cornerstonetoolsmultitouchstartactive', 'cornerstonetoolsmultitouchdrag'];
 
+const PLUGIN_CORNERSTONE = 'cornerstone';
+
 /**
  * This function loads a study series into a viewport element.
  *
@@ -40,7 +42,7 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
     // Get the current element and it's index in the list of all viewports
     // The viewport index is often used to store information about a viewport element
     const element = data.element;
-    const viewportIndex = $('.imageViewerViewport').index(element);
+    const viewportIndex = templateData.viewportIndex;
 
     const layoutManager = OHIF.viewerbase.layoutManager;
     layoutManager.viewportData = layoutManager.viewportData || {};
@@ -115,7 +117,8 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
         displaySetInstanceUid,
         currentImageIdIndex,
         viewport: viewport || data.viewport,
-        viewportIndex
+        viewportIndex,
+        plugin: PLUGIN_CORNERSTONE
     };
 
     // Handle the case where the imageId isn't loaded correctly and the
@@ -461,7 +464,9 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
         // This is done to ensure that the active element has the current
         // focus, so that keyboard events are triggered.
         if (viewportIndex === Session.get('activeViewport')) {
-            setActiveViewport(element);
+            const viewportContainer = $element.parents('.viewportContainer');
+
+            setActiveViewport(viewportContainer);
         }
 
         // Run any renderedCallback that exists in the data context
@@ -469,9 +474,6 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
             data.renderedCallback(element);
         }
 
-        // Update the LayoutManagerUpdated session key
-        layoutManager.updateSession();
-
         // Check if it has after loadAndCacheImage callback
         if (typeof callbacks.after === 'function') {
             OHIF.log.info('imageViewerViewport after callback');
@@ -624,8 +626,8 @@ Template.imageViewerViewport.onRendered(function() {
                 viewportIndexToZoom = layoutManager.zoomedViewportIndex || 0;
             }
             // Set zoomed viewport as active...
-            const element = $('.imageViewerViewport').get(viewportIndexToZoom);
-            setActiveViewport(element);
+            const viewportContainer = $('.viewportContainer').get(viewportIndexToZoom);
+            setActiveViewport(viewportContainer);
         });
     }
 
@@ -682,6 +684,8 @@ Template.imageViewerViewport.onDestroyed(function() {
 Template.imageViewerViewport.events({
     'OHIFActivateViewport .imageViewerViewport'(event) {
         OHIF.log.info('imageViewerViewport OHIFActivateViewport');
-        setActiveViewport(event.currentTarget);
+
+        const viewportContainer = $(event.currentTarget).parents('.viewportContainer').get(0);
+        setActiveViewport(viewportContainer);
     }
 });