Implementing disabled handling for commands

LesionTracker/.meteor/versions

@@ -87,17 +87,19 @@ natestrauser:select2@4.0.3
 npm-bcrypt@0.9.2
 npm-mongo@2.2.11_2
 observe-sequence@1.0.14
-ohif:polyfill@0.0.1
+ohif:commands@0.0.1
 ohif:core@0.0.1
 ohif:cornerstone@0.0.1
 ohif:design@0.0.1
 ohif:dicom-services@0.0.1
 ohif:hanging-protocols@0.0.1
 ohif:header@0.0.1
+ohif:hotkeys@0.0.1
 ohif:lesiontracker@0.0.1
 ohif:log@0.0.1
 ohif:measurements@0.0.1
 ohif:metadata@0.0.1
+ohif:polyfill@0.0.1
 ohif:select-tree@0.0.1
 ohif:study-list@0.0.1
 ohif:themes@0.0.1

LesionTracker/client/components/toolbarSection/toolbarSection.js

@@ -141,8 +141,8 @@ Template.toolbarSection.helpers({
             id: 'toggleCineDialog',
             title: 'CINE',
             classes: 'imageViewerCommand',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-cineplay-toggle',
+            iconClasses: 'fa fa-youtube-play',
-            disableFunction: Viewerbase.viewportUtils.hasMultipleFrames
+            active: () => $('#cineDialog').is(':visible')
         });
 
         const buttonData = [];

OHIFViewer/client/components/toolbarSection/toolbarSection.js

@@ -159,24 +159,23 @@ Template.toolbarSection.helpers({
                 id: 'previousDisplaySet',
                 title: 'Previous',
                 classes: 'imageViewerCommand',
-                buttonTemplateName: 'displaySetNavigation',
+                iconClasses: 'fa fa-toggle-up fa-fw'
-                isNext: false
             });
 
             buttonData.push({
                 id: 'nextDisplaySet',
                 title: 'Next',
                 classes: 'imageViewerCommand',
-                buttonTemplateName: 'displaySetNavigation',
+                iconClasses: 'fa fa-toggle-down fa-fw'
-                isNext: true
             });
 
+            const { isPlaying } = OHIF.viewerbase.viewportUtils;
             buttonData.push({
                 id: 'toggleCinePlay',
-                title: 'Toggle CINE Play',
+                title: () => isPlaying() ? 'Stop' : 'Play',
                 classes: 'imageViewerCommand',
-                buttonTemplateName: 'playClipButton',
+                iconClasses: () => ('fa fa-fw ' + (isPlaying() ? 'fa-stop' : 'fa-play')),
-                active: OHIF.viewerbase.viewportUtils.isPlaying
+                active: isPlaying
             });
 
             buttonData.push({
@@ -184,7 +183,6 @@ Template.toolbarSection.helpers({
                 title: 'CINE',
                 classes: 'imageViewerCommand',
                 iconClasses: 'fa fa-youtube-play',
-                disableFunction: OHIF.viewerbase.viewportUtils.hasMultipleFrames,
                 active: () => $('#cineDialog').is(':visible')
             });
         }

Packages/ohif-commands/client/classes/CommandsManager.js

@@ -57,21 +57,46 @@ export class CommandsManager {
         context[command] = definition;
     }
 
+    setDisabledFunction(contextName, command, func) {
+        if (!command || typeof func !== 'function') return;
+        const context = this.getContext(contextName);
+        if (!context) return;
+        const definition = context[command];
+        if (!definition) {
+            return OHIF.log.warn(`Trying to set a disabled function to a command "${command}" that was not yet defined`);
+        }
+
+        definition.disabled = func;
+    }
+
     clear(contextName) {
         if (!contextName) return;
         this.contexts[contextName] = {};
     }
 
-    run(command) {
+    getDefinition(command) {
         const context = this.getCurrentContext();
         if (!context) return;
-        const definition = context[command];
+        return context[command];
+    }
+
+    isDisabled(command) {
+        const definition = this.getDefinition(command);
+        if (!definition) return false;
+        const { disabled } = definition;
+        if (_.isFunction(disabled) && disabled()) return true;
+        if (!_.isFunction(disabled) && disabled) return true;
+        return false;
+    }
+
+    run(command) {
+        const definition = this.getDefinition(command);
         if (!definition) {
             return OHIF.log.warn(`Command "${command}" not found in current context`);
         }
 
-        const { action, disabled, params } = definition;
+        const { action, params } = definition;
-        if ((_.isFunction(disabled) && disabled()) || (!_.isUndefined(disabled) && disabled)) return;
+        if (this.isDisabled(command)) return;
         if (typeof action !== 'function') {
             return OHIF.log.warn(`No action was defined for command "${command}"`);
         } else {

Packages/ohif-hotkeys/package.js

@@ -12,7 +12,8 @@ Package.onUse(function(api) {
         'ecmascript',
         'reactive-var',
         'session',
-        'iron:router'
+        'iron:router',
+        'u2622:persistent-session'
     ]);
 
     // OHIF dependencies

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

@@ -1,16 +0,0 @@
-<template name="displaySetNavigation">
-    <div id="{{this.id}}"
-         class="toolbarSectionButton rp-x-1 {{this.classes}} {{#if isNext}}js-next{{else}}js-prev{{/if}} {{#if (disableButton isNext)}}disabled{{/if}}"
-         title="{{this.title}}">
-        <div class="svgContainer">
-            {{#if isNext}}
-                <i class="fa fa-toggle-down fa-fw"></i>
-            {{else}}
-                <i class="fa fa-toggle-up fa-fw"></i>
-            {{/if}}
-        </div>
-        <div class="buttonLabel">
-            {{#if isNext}}Next{{else}}Previous{{/if}}
-        </div>
-    </div>
-</template>

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

@@ -1,32 +0,0 @@
-import { OHIF } from 'meteor/ohif:core';
-import { Template } from 'meteor/templating';
-
-Template.displaySetNavigation.events({
-    'click .js-next'(event, instance) {
-        if ($(event.currentTarget).hasClass('disabled')) {
-            return;
-        }
-
-        OHIF.viewerbase.layoutManager.moveDisplaySets(true);
-    },
-
-    'click .js-prev'(event, instance) {
-        if ($(event.currentTarget).hasClass('disabled')) {
-            return;
-        }
-
-        OHIF.viewerbase.layoutManager.moveDisplaySets(false);
-    }
-});
-
-Template.displaySetNavigation.helpers({
-    disableButton(isNext) {
-        Session.get('LayoutManagerUpdated');
-
-        if (!OHIF.viewerbase.layoutManager) {
-            return;
-        }
-
-        return !OHIF.viewerbase.layoutManager.canMoveDisplaySets(isNext);
-    }
-});

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

@@ -1,16 +0,0 @@
-<template name="playClipButton">
-    <div id="{{this.id}}"
-         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if isPlaying}}active{{/if}} {{#if (disableButton)}}disabled{{/if}}"
-         title="{{this.title}}">
-        <div class="svgContainer">
-            {{#if isPlaying}}
-                <i class="fa fa-stop fa-fw"></i>
-            {{else}}
-                <i class="fa fa-play fa-fw"></i>
-            {{/if}}
-        </div>
-        <div class="buttonLabel">
-            {{#if isPlaying}}Stop{{else}}Play{{/if}}
-        </div>
-    </div>
-</template>

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

@@ -1,11 +0,0 @@
-import { Template } from 'meteor/templating';
-import { viewportUtils } from '../../../lib/viewportUtils';
-
-Template.playClipButton.helpers({
-    isPlaying: function() {
-        return viewportUtils.isPlaying();
-    },
-    disableButton() {
-        return viewportUtils.hasMultipleFrames();
-    }
-});

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

@@ -79,18 +79,24 @@ Template.toolbarSectionButton.helpers({
     svgLink() {
         const instance = Template.instance();
         const activeToolId = Session.get('ToolManagerActiveTool');
-        return instance.getActiveToolSubProperty('svgLink', activeToolId);
+        const svgLink = instance.getActiveToolSubProperty('svgLink', activeToolId);
+        return _.isFunction(svgLink) ? svgLink() : svgLink;
     },
 
     iconClasses() {
         const instance = Template.instance();
         const activeToolId = Session.get('ToolManagerActiveTool');
-        return instance.getActiveToolSubProperty('iconClasses', activeToolId);
+        const iconClasses = instance.getActiveToolSubProperty('iconClasses', activeToolId);
+        return _.isFunction(iconClasses) ? iconClasses() : iconClasses;
     },
 
     disableButton() {
+        Session.get('activeViewport');
+        Session.get('LayoutManagerUpdated');
         const instance = Template.instance();
-        return instance.data.disableFunction && instance.data.disableFunction();
+        const isCommandDisabled = OHIF.commands.isDisabled(instance.data.id);
+        const isFunctionDisabled = instance.data.disableFunction && instance.data.disableFunction();
+        return isCommandDisabled || isFunctionDisabled;
     }
 });
 

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

@@ -1,4 +1,5 @@
 import { Meteor } from 'meteor/meteor';
+import { Session } from 'meteor/session';
 import { $ } from 'meteor/jquery';
 import { _ } from 'meteor/underscore';
 import { OHIF } from 'meteor/ohif:core';
@@ -55,6 +56,12 @@ Meteor.startup(function() {
     const contextName = 'viewer';
     OHIF.commands.createContext(contextName);
 
+    // Create a function that returns true if the active viewport is empty
+    const isActiveViewportEmpty = () => {
+        const activeViewport = Session.get('activeViewport') || 0;
+        return $('.imageViewerViewport').eq(activeViewport).hasClass('empty');
+    };
+
     // Functions to register the tool switching commands
     const registerToolCommands = map => _.each(map, (commandName, toolId) => {
         OHIF.commands.register(contextName, toolId, {
@@ -85,7 +92,8 @@ Meteor.startup(function() {
     const registerViewportCommands = map => _.each(map, (commandName, commandId) => {
         OHIF.commands.register(contextName, commandId, {
             name: commandName,
-            action: viewportUtils[commandId]
+            action: viewportUtils[commandId],
+            disabled: isActiveViewportEmpty
         });
     });
 
@@ -99,8 +107,6 @@ Meteor.startup(function() {
         flipV: 'Flip vertically',
         rotateR: 'Rotate right',
         rotateL: 'Rotate left',
-        toggleCinePlay: 'Play/Pause',
-        toggleCineDialog: 'CINE dialog',
         resetViewport: 'Reset',
         clearTools: 'Clear'
     });
@@ -124,7 +130,6 @@ Meteor.startup(function() {
     });
 
     // Register scrolling commands
-    const isActiveViewportEmpty = () => $('.viewportContainer.active .imageViewerViewport').hasClass('empty');
     OHIF.commands.set(contextName, {
         scrollDown: {
             name: 'Scroll down',
@@ -147,19 +152,21 @@ Meteor.startup(function() {
     // Register viewport navigation commands
     OHIF.commands.set(contextName, {
         previousDisplaySet: {
-            name: 'Scroll down',
+            name: 'Previous display set',
-            action: () => OHIF.viewerbase.layoutManager.moveDisplaySets(false)
+            action: () => OHIF.viewerbase.layoutManager.moveDisplaySets(false),
+            disabled: () => !OHIF.viewerbase.layoutManager.canMoveDisplaySets(false)
         },
         nextDisplaySet: {
-            name: 'Scroll up',
+            name: 'Next display set',
-            action: () => OHIF.viewerbase.layoutManager.moveDisplaySets(true)
+            action: () => OHIF.viewerbase.layoutManager.moveDisplaySets(true),
+            disabled: () => !OHIF.viewerbase.layoutManager.canMoveDisplaySets(true)
         },
         nextPanel: {
-            name: 'Scroll to first image',
+            name: 'Next panel',
             action: () => panelNavigation.loadNextActivePanel()
         },
         previousPanel: {
-            name: 'Scroll to last image',
+            name: 'Previous panel',
             action: () => panelNavigation.loadPreviousActivePanel()
         }
     }, true);
@@ -176,6 +183,16 @@ Meteor.startup(function() {
                 const $dicomTags = $('.imageViewerViewportOverlay .dicomTag');
                 $dicomTags.toggle($dicomTags.eq(0).css('display') === 'none');
             }
+        },
+        toggleCinePlay: {
+            name: 'Play/Pause',
+            action: viewportUtils.toggleCinePlay,
+            disabled: OHIF.viewerbase.viewportUtils.hasMultipleFrames
+        },
+        toggleCineDialog: {
+            name: 'CINE dialog',
+            action: viewportUtils.toggleCineDialog,
+            disabled: OHIF.viewerbase.viewportUtils.hasMultipleFrames
         }
     }, true);
 

Packages/ohif-viewerbase/package.js

@@ -171,9 +171,6 @@ Package.onUse(function(api) {
     api.addFiles('client/components/viewer/toolbarSectionTools/toolbarSectionTools.js', 'client');
     api.addFiles('client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl', 'client');
 
-    api.addFiles('client/components/viewer/playClipButton/playClipButton.html', 'client');
-    api.addFiles('client/components/viewer/playClipButton/playClipButton.js', 'client');
-
     api.addFiles('client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.html', 'client');
     api.addFiles('client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.js', 'client');
     api.addFiles('client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.styl', 'client');
@@ -182,9 +179,6 @@ Package.onUse(function(api) {
     api.addFiles('client/components/viewer/textMarkerDialogs/textMarkerDialogs.js', 'client');
     api.addFiles('client/components/viewer/textMarkerDialogs/textMarkerDialogs.styl', 'client');
 
-    api.addFiles('client/components/viewer/displaySetNavigation/displaySetNavigation.html', 'client');
-    api.addFiles('client/components/viewer/displaySetNavigation/displaySetNavigation.js', 'client');
-
     api.addFiles('client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.html', 'client');
     api.addFiles('client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.styl', 'client');
     api.addFiles('client/components/viewer/studySeriesQuickSwitch/studySeriesQuickSwitch.js', 'client');

StandaloneViewer/StandaloneViewer/client/components/toolbarSection/toolbarSection.js

@@ -143,23 +143,23 @@ Template.toolbarSection.helpers({
                 id: 'previousDisplaySet',
                 title: 'Previous',
                 classes: 'imageViewerCommand',
-                buttonTemplateName: 'displaySetNavigation',
+                iconClasses: 'fa fa-toggle-up fa-fw'
-                isNext: false
             });
 
             buttonData.push({
                 id: 'nextDisplaySet',
                 title: 'Next',
                 classes: 'imageViewerCommand',
-                buttonTemplateName: 'displaySetNavigation',
+                iconClasses: 'fa fa-toggle-down fa-fw'
-                isNext: true
             });
 
+            const { isPlaying } = OHIF.viewerbase.viewportUtils;
             buttonData.push({
                 id: 'toggleCinePlay',
-                title: 'Toggle CINE Play',
+                title: () => isPlaying() ? 'Stop' : 'Play',
                 classes: 'imageViewerCommand',
-                buttonTemplateName: 'playClipButton'
+                iconClasses: () => ('fa fa-fw ' + (isPlaying() ? 'fa-stop' : 'fa-play')),
+                active: isPlaying
             });
 
             buttonData.push({
@@ -167,7 +167,7 @@ Template.toolbarSection.helpers({
                 title: 'CINE',
                 classes: 'imageViewerCommand',
                 iconClasses: 'fa fa-youtube-play',
-                disableFunction: OHIF.viewerbase.viewportUtils.hasMultipleFrames
+                active: () => $('#cineDialog').is(':visible')
             });
         }