Fixes for activeViewport reactivity

Packages/viewerbase/components/studyBrowser/thumbnailEntry/thumbnailEntry.js

@@ -17,7 +17,7 @@ function cloneElement(element, targetId) {
     return clone;
 }
 
-function thumbnailDragStartHandler(e, studies) {
+function thumbnailDragStartHandler(e, data) {
     // Prevent any scrolling behaviour normally caused by the original event
     e.originalEvent.preventDefault();
 
@@ -28,9 +28,10 @@ function thumbnailDragStartHandler(e, studies) {
     // Store this data for use during drag and drop
     OHIF.viewer.dragAndDropData = {
         studyInstanceUid: imageThumbnail.data('studyInstanceUid'),
-        seriesInstanceUid: imageThumbnail.data('seriesInstanceUid'),
-        studies: studies
+        seriesInstanceUid: imageThumbnail.data('seriesInstanceUid')
     };
+
+    $.extend(OHIF.viewer.dragAndDropData, data);
     
     // Clone the image thumbnail
     var targetId = targetThumbnail.id + 'DragClone';
@@ -202,8 +203,8 @@ Template.thumbnailEntry.onRendered(function() {
 Template.thumbnailEntry.events({
     // Touch drag/drop events
     'touchstart .thumbnailEntry, mousedown .thumbnailEntry': function(e) {
-        var studies = Template.parentData(2).studies;
-        thumbnailDragStartHandler(e, studies);
+        var data = Template.parentData(2);
+        thumbnailDragStartHandler(e, data);
     },
     'touchmove .thumbnailEntry': function(e) {
         thumbnailDragHandler(e, e.currentTarget);

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

@@ -5,10 +5,9 @@
  *
  * @param element
  */
-function enablePrefetchOnElement() {
-    var viewportIndex = Session.get('ActiveViewport');
+function enablePrefetchOnElement(viewportIndex) {
     var element = $('.imageViewerViewport').get(viewportIndex);
-    console.log('Enabling prefetch on new element');
+    //console.log('Enabling prefetch on new element');
 
     // Loop through all viewports and disable stackPrefetch
     $('.imageViewerViewport').each(function() {
@@ -25,9 +24,7 @@ function enablePrefetchOnElement() {
     }
 }
 
-function displayReferenceLines() {
-    console.log("Changing reference line display");
-    var viewportIndex = Session.get('ActiveViewport');
+function displayReferenceLines(viewportIndex) {
     var element = $('.imageViewerViewport').get(viewportIndex);
 
     $('.imageViewerViewport').each(function(index, element) {
@@ -157,9 +154,6 @@ function loadSeriesIntoViewport(data) {
         if (OHIF.viewer.refLinesEnabled && imagePlane && imagePlane.frameOfReferenceUID) {
             OHIF.viewer.updateImageSynchronizer.add(element);
         }
-        
-        //enablePrefetchOnElement();
-        displayReferenceLines();
     });
 }
 
@@ -222,9 +216,12 @@ Template.imageViewerViewport.onDestroyed(function() {
 
 Template.imageViewerViewport.events({
     'ActivateViewport .imageViewerViewport': function(e) {
-        console.log('ActivateViewport: ' + e.viewportIndex);
-        Session.set('ActiveViewport', e.viewportIndex);
-        enablePrefetchOnElement();
-        displayReferenceLines();
+        if (this.viewportIndex === this.activeViewport.get()) {
+            return;
+        }
+        console.log('ActivateViewport index: ' + this.viewportIndex);
+        this.activeViewport.set(this.viewportIndex);
+        enablePrefetchOnElement(this.viewportIndex);
+        displayReferenceLines(this.viewportIndex);
     },
 });

Packages/viewerbase/components/viewer/imageViewerViewports/imageViewerViewports.html

@@ -3,7 +3,7 @@
         {{ #each viewportArray }}
         <div class="viewportContainer" style="height:{{height}}%;width:{{width}}%;">
             <div class="removable">
-                {{ >imageViewerViewport studies=studies activeViewport=activeViewport}}
+                {{ >imageViewerViewport viewportIndex=viewportIndex studies=studies activeViewport=activeViewport}}
             </div>
         </div>
         {{ /each }}

Packages/viewerbase/components/viewer/playClipButton/playClipButton.js

@@ -1,7 +1,7 @@
 Template.playClipButton.helpers({
     'isPlaying': function() {
         Session.get('UpdateCINE');
-        var viewportIndex = Session.get('ActiveViewport');
+        var viewportIndex = this.activeViewport.get();
         return !!OHIF.viewer.isPlaying[viewportIndex];
     }
 });

Packages/viewerbase/components/viewer/toolbar/toolbar.html

@@ -2,15 +2,15 @@
     <div id='toolbar'>
         <div class="btn-group">
             {{ #each button }}
-                {{ >simpleToolbarButton }}
+                {{ >simpleToolbarButton}}
             {{ /each }}
 
             {{ #if includePlayClipButton }}
-                {{ > playClipButton activeViewport=activeViewport}}
+                {{ >playClipButton activeViewport=activeViewport}}
             {{ /if }}
 
             {{ #if includeLayoutButton }}
-                {{ > layoutButton viewportRows=viewportRows viewportColumns=viewportColumns}}
+                {{ >layoutButton viewportRows=viewportRows viewportColumns=viewportColumns}}
             {{ /if }}
         </div>
     </div>

Packages/viewerbase/components/viewer/toolbar/toolbar.js

@@ -84,7 +84,7 @@ Template.toolbar.events({
         if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
             return;
         }
-        var viewportIndex = Session.get('ActiveViewport');
+        var viewportIndex = Template.parentData(0).activeViewport.get();
         var element = $('.imageViewerViewport').get(viewportIndex);
         OHIF.viewer.functionList[command](element);
     }
@@ -101,20 +101,20 @@ Template.toolbar.onRendered(function() {
 
 Template.toolbar.helpers({
     'button': function() {
-        if (this.buttonData) {
-            return this.buttonData;
+        if (this.toolbarOptions && this.toolbarOptions.buttonData) {
+            return this.toolbarOptions.buttonData;
         }
         return getDefaultButtonData();
     },
     'includePlayClipButton': function() {
-        if (this.includePlayClipButton !== undefined) {
-            return this.includePlayClipButton;
+        if (this.toolbarOptions && this.toolbarOptions.includePlayClipButton !== undefined) {
+            return this.toolbarOptions.includePlayClipButton;
         }
         return true;
     },
     'includeLayoutButton': function() {
-        if (this.includeLayoutButton !== undefined) {
-            return this.includeLayoutButton;
+        if (this.toolbarOptions && this.toolbarOptions.includeLayoutButton !== undefined) {
+            return this.toolbarOptions.includeLayoutButton;
         }
         return true;
     }