Fixed OHIF Viewer layout / CINE / Hanging Protocol buttons (OHIF-49)

OHIFViewer/client/components/toolbarSection/toolbarSection.html

@@ -8,6 +8,9 @@
             <div class="pull-right m-t-1 rm-x-1">
                 {{>roundedButtonGroup rightSidebarToggleButtonData}}
             </div>
+            <div class="pull-right">
+                {{> toolbarSectionTools toolbarButtons=hangingProtocolButtons}}
+            </div>
         </div>
     </div>
 </template>

OHIFViewer/client/components/toolbarSection/toolbarSection.js

@@ -82,6 +82,27 @@ Template.toolbarSection.helpers({
             iconClasses: 'fa fa-undo'
         });
 
+        buttonData.push({
+            id: 'toggleCinePlay',
+            title: 'Toggle CINE Play',
+            classes: 'imageViewerCommand',
+            buttonTemplateName: 'playClipButton'
+        });
+
+        buttonData.push({
+            id: 'toggleCineDialog',
+            title: 'CINE',
+            classes: 'imageViewerCommand',
+            iconClasses: 'fa fa-youtube-play'
+        });
+
+        buttonData.push({
+            id: 'layout',
+            title: 'Layout',
+            iconClasses: 'fa fa-th-large',
+            buttonTemplateName: 'layoutButton'
+        });
+
         return buttonData;
     },
 
@@ -145,6 +166,26 @@ Template.toolbarSection.helpers({
         });
 
         return buttonData;   
+    },
+
+    hangingProtocolButtons() {
+        let buttonData = [];
+
+        buttonData.push({
+            id: 'previousPresentationGroup',
+            title: 'Prev. Stage',
+            iconClasses: 'fa fa-step-backward',
+            buttonTemplateName: 'previousPresentationGroupButton'
+        });
+
+        buttonData.push({
+            id: 'nextPresentationGroup',
+            title: 'Next Stage',
+            iconClasses: 'fa fa-step-forward',
+            buttonTemplateName: 'nextPresentationGroupButton'
+        });
+
+        return buttonData;
     }
 
 });
@@ -152,6 +193,8 @@ Template.toolbarSection.helpers({
 Template.toolbarSection.onRendered(function() {
     const instance = Template.instance();
 
+    instance.$('#layout').dropdown();
+
     // Set disabled/enabled tool buttons that are set in toolManager
     const states = toolManager.getToolDefaultStates();
     const disabledToolButtons = states.disabledToolButtons;

OHIFViewer/client/components/viewer/viewer.html

@@ -2,6 +2,7 @@
     {{#if Template.subscriptionsReady}}
     <div class="viewerDialogs">
         {{> cineDialog}}
+        {{> layoutChooser }}
     </div>
     <div id="viewer">
         {{> toolbarSection (clone this)}}

OHIFViewer/client/components/viewer/viewer.js

@@ -1,5 +1,22 @@
 import { OHIF } from 'meteor/ohif:core';
+
 OHIF.viewer = OHIF.viewer || {};
+OHIF.viewer.loadIndicatorDelay = 500;
+OHIF.viewer.defaultTool = 'wwwc';
+OHIF.viewer.refLinesEnabled = true;
+OHIF.viewer.isPlaying = {};
+OHIF.viewer.cine = {
+    framesPerSecond: 24,
+    loop: true
+};
+
+OHIF.viewer.functionList = {
+    toggleCineDialog: toggleCineDialog,
+    toggleCinePlay: toggleCinePlay,
+    clearTools: clearTools,
+    resetViewport: resetViewport,
+    invert: invert
+};
 
 Session.setDefault('activeViewport', false);
 Session.setDefault('leftSidebar', false);
@@ -8,9 +25,6 @@ Session.setDefault('rightSidebar', false);
 Template.viewer.onCreated(() => {
     const instance = Template.instance();
 
-    // Attach the Window resize listener
-    $(window).on('resize', handleResize);
-
     instance.data.state = new ReactiveDict();
     instance.data.state.set('leftSidebar', Session.get('leftSidebar'));
     instance.data.state.set('rightSidebar', Session.get('rightSidebar'));
@@ -19,42 +33,6 @@ Template.viewer.onCreated(() => {
 
     log.info('viewer onCreated');
 
-    OHIF.viewer.loadIndicatorDelay = 500;
-    OHIF.viewer.defaultTool = 'wwwc';
-    OHIF.viewer.refLinesEnabled = true;
-    OHIF.viewer.isPlaying = {};
-    OHIF.viewer.cine = {
-        framesPerSecond: 24,
-        loop: true
-    };
-
-    OHIF.viewer.functionList = {
-        invert: element => {
-            const viewport = cornerstone.getViewport(element);
-            viewport.invert = !viewport.invert;
-            cornerstone.setViewport(element, viewport);
-        },
-        resetViewport: element => {
-            const enabledElement = cornerstone.getEnabledElement(element);
-            if (enabledElement.fitToWindow === false) {
-                const imageId = enabledElement.image.imageId;
-                const instance = cornerstoneTools.metaData.get('instance', imageId);
-
-                enabledElement.viewport = cornerstone.getDefaultViewport(enabledElement.canvas, enabledElement.image);
-                
-                const instanceClassDefaultViewport = getInstanceClassDefaultViewport(instance, enabledElement, imageId);
-                cornerstone.setViewport(element, instanceClassDefaultViewport);
-            } else {
-                cornerstone.reset(element);
-            }
-        },
-        clearTools: element => {
-            const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
-            toolStateManager.clear(element);
-            cornerstone.updateImage(element);
-        }
-    };
-
     if (isTouchDevice()) {
         OHIF.viewer.tooltipConfig = {
             trigger: 'manual'
@@ -96,27 +74,6 @@ Template.viewer.onCreated(() => {
     });
 });
 
-Template.viewer.onRendered(() => {
-    const instance = Template.instance();
-
-    // Enable hotkeys
-    enableHotkeys();
-
-    const parentNode = document.getElementById('layoutManagerTarget');
-    const studies = instance.data.studies;
-    layoutManager = new LayoutManager(parentNode, studies);
-
-    ProtocolEngine = new HP.ProtocolEngine(layoutManager, studies);
-    HP.setEngine(ProtocolEngine);
-});
-
-Template.viewer.onDestroyed(() => {
-    log.info('onDestroyed');
-
-    // Remove the Window resize listener
-    $(window).off('resize', handleResize);
-});
-
 Template.viewer.events({
     'click .js-toggle-studies'() {
         const instance = Template.instance();