LT-115: Grouping sub target tools with new layout and changing data structure

LesionTracker/client/components/toolbarSection/toolbarSection.js

@@ -1,4 +1,5 @@
-import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+import { Session } from 'meteor/session';
 
 Template.toolbarSection.helpers({
     // Returns true if the view shall be split in two viewports
@@ -50,6 +51,116 @@ Template.toolbarSection.helpers({
         // Check if the measure tools shall be disabled
         const isToolDisabled = false; //!Template.instance().data.timepointApi;
 
+        const targetSubTools = [];
+
+        targetSubTools.push({
+            id: 'bidirectional',
+            title: 'Bidirectional',
+            classes: 'imageViewerTool rm-l-3',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-target',
+            disabled: isToolDisabled
+        });
+
+        // TODO: Get real icons for CR / UN / EX
+        targetSubTools.push({
+            id: 'targetCR',
+            title: 'CR Target',
+            classes: 'imageViewerTool',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
+            disabled: isToolDisabled
+        });
+
+        targetSubTools.push({
+            id: 'targetUN',
+            title: 'UN Target',
+            classes: 'imageViewerTool',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
+            disabled: isToolDisabled
+        });
+
+        // Disabling this on Lesion Tracker
+        // targetSubTools.push({
+        //     id: 'targetEX',
+        //     title: 'EX Target',
+        //     classes: 'imageViewerTool',
+        //     svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
+        //     disabled: isToolDisabled
+        // });
+
+        const extraTools = [];
+
+        extraTools.push({
+            id: 'stackScroll',
+            title: 'Stack Scroll',
+            classes: 'imageViewerTool',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-stack-scroll'
+        });
+
+        extraTools.push({
+            id: 'resetViewport',
+            title: 'Reset',
+            classes: 'imageViewerCommand',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-reset'
+        });
+
+        extraTools.push({
+            id: 'rotateR',
+            title: 'Rotate Right',
+            classes: 'imageViewerCommand',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-rotate-right'
+        });
+
+        extraTools.push({
+            id: 'flipH',
+            title: 'Flip H',
+            classes: 'imageViewerCommand',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-horizontal'
+        });
+
+        extraTools.push({
+            id: 'flipV',
+            title: 'Flip V',
+            classes: 'imageViewerCommand',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-vertical'
+        });
+
+        extraTools.push({
+            id: 'invert',
+            title: 'Invert',
+            classes: 'imageViewerCommand',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-invert'
+        });
+
+        extraTools.push({
+            id: 'magnify',
+            title: 'Magnify',
+            classes: 'imageViewerTool',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-magnify'
+        });
+
+        extraTools.push({
+            id: 'ellipticalRoi',
+            title: 'Ellipse',
+            classes: 'imageViewerTool',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-elliptical-roi'
+        });
+
+        extraTools.push({
+            id: 'linkStackScroll',
+            title: 'Link Scroll',
+            classes: 'imageViewerCommand nonAutoDisableState',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-link-stack-scroll',
+            disableFunction: isStackScrollLinkingDisabled
+        });
+
+        extraTools.push({
+            id: 'toggleCineDialog',
+            title: 'CINE',
+            classes: 'imageViewerCommand',
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-cineplay-toggle',
+            disableFunction: hasMultipleFrames
+        });
+
         const buttonData = [];
 
         buttonData.push({
@@ -79,22 +190,23 @@ Template.toolbarSection.helpers({
         buttonData.push({
             id: 'link',
             title: 'Link',
-            classes: 'imageViewerCommand toolbarSectionButton',
+            classes: 'imageViewerCommand',
             svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-link'
         });*/
 
         buttonData.push({
-            id: 'bidirectional',
+            id: 'toggleTarget',
             title: 'Target',
-            classes: 'imageViewerTool rm-l-3',
+            classes: 'rm-l-3',
             svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-target',
-            disabled: isToolDisabled
+            disabled: isToolDisabled,
+            subTools: targetSubTools
         });
 
         buttonData.push({
             id: 'nonTarget',
             title: 'Non-Target',
-            classes: 'imageViewerTool toolbarSectionButton',
+            classes: 'imageViewerTool',
             svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-non-target',
             disabled: isToolDisabled
         });
@@ -102,121 +214,31 @@ Template.toolbarSection.helpers({
         buttonData.push({
             id: 'length',
             title: 'Temp',
-            classes: 'imageViewerTool toolbarSectionButton',
+            classes: 'imageViewerTool',
             svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp'
         });
 
-        return buttonData;
-    },
-
-    extraToolbarButtons() {
-        // Check if the measure tools shall be disabled
-        const isToolDisabled = !Template.instance().data.timepointApi.currentTimepointId;
-        const buttonData = [];
-
         buttonData.push({
-            id: 'stackScroll',
+            id: 'toggleMore',
-            title: 'Stack Scroll',
+            title: 'More',
-            classes: 'imageViewerTool toolbarSectionButton',
+            classes: 'rp-x-1 rm-l-3',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-stack-scroll'
+            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-more',
+            disabled: isToolDisabled,
+            subTools: extraTools
         });
 
-        buttonData.push({
-            id: 'resetViewport',
-            title: 'Reset',
-            classes: 'imageViewerCommand toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-reset'
-        });
-
-        buttonData.push({
-            id: 'rotateR',
-            title: 'Rotate Right',
-            classes: 'imageViewerCommand toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-rotate-right'
-        });
-
-        buttonData.push({
-            id: 'flipH',
-            title: 'Flip H',
-            classes: 'imageViewerCommand toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-horizontal'
-        });
-
-        buttonData.push({
-            id: 'flipV',
-            title: 'Flip V',
-            classes: 'imageViewerCommand toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-vertical'
-        });
-
-        buttonData.push({
-            id: 'invert',
-            title: 'Invert',
-            classes: 'imageViewerCommand toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-invert'
-        });
-
-        buttonData.push({
-            id: 'magnify',
-            title: 'Magnify',
-            classes: 'imageViewerTool toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-magnify'
-        });
-
-        buttonData.push({
-            id: 'ellipticalRoi',
-            title: 'Ellipse',
-            classes: 'imageViewerTool toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-elliptical-roi'
-        });
-
-        buttonData.push({
-            id: 'linkStackScroll',
-            title: 'Link Scroll',
-            classes: 'imageViewerCommand toolbarSectionButton nonAutoDisableState',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-link-stack-scroll',
-            disableFunction: isStackScrollLinkingDisabled
-        });
-
-        buttonData.push({
-            id: 'toggleCineDialog',
-            title: 'CINE',
-            classes: 'imageViewerCommand toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-cineplay-toggle',
-            disableFunction: hasMultipleFrames
-        });
-
-        // TODO: Get real icons for CR / UN / EX
-        buttonData.push({
-            id: 'targetCR',
-            title: 'CR Target',
-            classes: 'imageViewerTool toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
-            disabled: isToolDisabled
-        });
-
-        buttonData.push({
-            id: 'targetUN',
-            title: 'UN Target',
-            classes: 'imageViewerTool toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
-            disabled: isToolDisabled
-        });
-
-        // Disabling this on Lesion Tracker
-        // buttonData.push({
-        //     id: 'targetEX',
-        //     title: 'EX Target',
-        //     classes: 'imageViewerTool toolbarSectionButton',
-        //     svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
-        //     disabled: isToolDisabled
-        // });
-
         return buttonData;
     }
 });
 
 Template.toolbarSection.events({
+    'click #toggleTarget'(event, instance) {
+        const $target = $(event.currentTarget);
+        if (!$target.hasClass('active') && $target.hasClass('expanded')) {
+            toolManager.setActiveTool('bidirectional');
+        }
+    },
+
     'click #toggleHUD'(event) {
         const $this = $(event.currentTarget);
 
@@ -228,6 +250,7 @@ Template.toolbarSection.events({
         const state = Session.get('measurementTableHudOpen');
         Session.set('measurementTableHudOpen', !state);
     },
+
     'click #toggleTrial'(event) {
         const $this = $(event.currentTarget);
 
@@ -251,7 +274,7 @@ Template.toolbarSection.onRendered(function() {
     allToolbarButtons.push($('#toggleMeasurements')[0]);
 
     if (disabledToolButtons && disabledToolButtons.length > 0) {
-        for (var i = 0; i < allToolbarButtons.length; i++) {
+        for (let i = 0; i < allToolbarButtons.length; i++) {
             const toolbarButton = allToolbarButtons[i];
             const index = disabledToolButtons.indexOf($(toolbarButton).attr('id'));
             if (index !== -1) {

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

@@ -3,7 +3,7 @@
         {{>UI.dynamic template=this.buttonTemplateName data=this}}
     {{else}}
         <div id="{{this.id}}"
-            class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if this.disabled}}disabled{{/if}} {{#if (disableButton)}}disabled{{/if}}"
+            class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if or this.disabled (disableButton)}}disabled{{/if}} {{#if this.subTools}}expandable{{/if}}"
             title="{{#if this.tooltipTitle}}{{this.tooltipTitle}}{{else}}{{this.title}}{{/if}}">
             <div class="svgContainer">
                 {{#if this.svgLink}}
@@ -15,8 +15,20 @@
                 {{/if}}
             </div>
             <div class="buttonLabel">
-                {{this.title}}
+                <span>{{this.title}}</span>
+                {{#if this.subTools}}
+                    <i class="fa fa-caret-down expanded-status" aria-hidden="true"></i>
+                {{/if}}
+            </div>
+            {{#if this.subTools}}
+                <div class="toolbarSectionDrawerContainer">
+                    <div class="toolbarSectionDrawer">
+                        {{#each subTool in this.subTools}}
+                            {{>toolbarSectionButton subTool}}
+                        {{/each}}
                     </div>
                 </div>
             {{/if}}
+        </div>
+    {{/if}}
 </template>

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

@@ -1,14 +1,20 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
 import { Session } from 'meteor/session';
+import { _ } from 'meteor/underscore';
 
 Template.toolbarSectionButton.helpers({
     activeClass() {
         // TODO: Find a way to prevent the 'flash' after a click, but before this helper runs
         const instance = Template.instance();
+        const subTools = instance.data.subTools;
+        const currentId = instance.data.id;
+        const activeId = Session.get('ToolManagerActiveTool');
+        const isCurrentTool = currentId === activeId;
+        const isSubTool = subTools && _.findWhere(subTools, { id: activeId });
 
-        // Check if the current tool is the active one
+        // Check if the current tool or a sub tool is the active one
-        if (instance.data.id === Session.get('ToolManagerActiveTool')) {
+        if (isCurrentTool || isSubTool) {
             // Return the active class
             return 'active';
         }
@@ -22,6 +28,9 @@ Template.toolbarSectionButton.helpers({
 
 Template.toolbarSectionButton.events({
     'click .imageViewerTool'(event, instance) {
+        // Prevent the event from bubbling to parent tools
+        event.stopPropagation();
+
         // Stop here if the tool is disabled
         if ($(event.currentTarget).hasClass('disabled')) {
             return;

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

@@ -1,12 +1,13 @@
 @import "{design}/app"
 
 .toolbarSectionButton
-  display: inline-block
   theme('color', '$defaultColor')
   theme('fill', '$defaultColor')
   theme('stroke', '$defaultColor')
-  min-width: 30px
   cursor: pointer
+  display: inline-block
+  min-width: 30px
+  position: relative
   text-align: center
 
   &.disabled
@@ -39,16 +40,16 @@
     height: 21px
 
   &:hover
-    &>.buttonLabel, &>.svgContainer
+    &>.buttonLabel
       theme('color', '$hoverColor')
 
-      svg
+      &>i
+        theme('color', '$hoverColor')
+
+    &>.svgContainer>svg
       theme('fill', '$hoverColor')
       theme('stroke', '$hoverColor')
 
-      i
-        theme('color', '$hoverColor')
-
   &:active, &.active
     &>.buttonLabel, &>.svgContainer
       theme('color', '$activeColor')

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

@@ -3,26 +3,5 @@
         {{#each toolbarButton in toolbarButtons}}
             {{>toolbarSectionButton toolbarButton}}
         {{/each}}
-
-        {{#if extraToolbarButtons}}
-            <div id="moreTools" class="js-open-more-tools toolbarSectionButton rp-x-1 rm-l-3">
-                <div class="svgContainer">
-                    <svg>
-                        <use xlink:href="/packages/ohif_viewerbase/assets/icons.svg#icon-tools-more"></use>
-                    </svg>
-                </div>
-                <div class="buttonLabel">
-                    <span>More</span>
-                    <i class="fa fa-caret-down" aria-hidden="true"></i>
-                </div>
-                <div class="toolbarSectionDrawerContainer">
-                    <div class="toolbarSectionDrawer">
-                        {{#each toolbarButton in extraToolbarButtons}}
-                            {{>toolbarSectionButton toolbarButton}}
-                        {{/each}}
-                    </div>
-                </div>
-            </div>
-        {{/if}}
     </div>
 </template>

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

@@ -1,9 +1,9 @@
 import { Template } from 'meteor/templating';
 
 Template.toolbarSectionTools.events({
-    'click .js-open-more-tools'(event, instance) {
+    'click .expandable'(event, instance) {
         const $target = $(event.currentTarget);
-        const isActive = $target.hasClass('active');
+        const isExpanded = $target.hasClass('expanded');
-        $target.toggleClass('active', !isActive);
+        $target.toggleClass('expanded', !isExpanded);
     }
 });

Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl

@@ -5,7 +5,16 @@ $distance = 10px
 .toolbarSectionTools
   position: relative
 
-  .toolbarSectionButton.active>.toolbarSectionDrawerContainer
+  .toolbarSectionButton>.buttonLabel i.expanded-status
+    text-align: center
+    transition(all 300ms ease)
+    width: 8px
+
+  .toolbarSectionButton.expanded
+    &>.buttonLabel i.expanded-status
+      transform(rotateX(180deg))
+
+    &>.toolbarSectionDrawerContainer
       opacity: 1
       transform(translateX(-50%) translateY(0) scale(1))
 
@@ -34,14 +43,3 @@ $distance = 10px
       padding-top: 6px
       text-align: center
       width: 100%
-
-  #moreTools
-    position: relative
-
-    .buttonLabel i
-      text-align: center
-      transition(all 300ms ease)
-      width: 8px
-
-    &.active .buttonLabel i
-      transform(rotateX(180deg))