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

2017-01-04 11:20:13 -02:00 · 2017-01-04 11:20:13 -02:00 · e996367ed5
commit e996367ed5
parent 55ca29e0cf
7 changed files with 183 additions and 161 deletions
--- a/LesionTracker/client/components/toolbarSection/toolbarSection.js
+++ b/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',
-            title: 'Stack Scroll',
-            classes: 'imageViewerTool toolbarSectionButton',
-            svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-stack-scroll'
+            id: 'toggleMore',
+            title: 'More',
+            classes: 'rp-x-1 rm-l-3',
+            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) {
--- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html
+++ b/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>
--- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
+++ b/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
-        if (instance.data.id === Session.get('ToolManagerActiveTool')) {
+        // Check if the current tool or a sub tool is the active one
+        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;
--- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl
+++ b/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
-        theme('fill', '$hoverColor')
-        theme('stroke', '$hoverColor')
-
-      i
+      &>i
        theme('color', '$hoverColor')

+    &>.svgContainer>svg
+      theme('fill', '$hoverColor')
+      theme('stroke', '$hoverColor')
+
  &:active, &.active
    &>.buttonLabel, &>.svgContainer
      theme('color', '$activeColor')
--- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.html
+++ b/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>
--- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js
+++ b/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');
-        $target.toggleClass('active', !isActive);
+        const isExpanded = $target.hasClass('expanded');
+        $target.toggleClass('expanded', !isExpanded);
    }
 });
--- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl
+++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl
@ -5,9 +5,18 @@ $distance = 10px
 .toolbarSectionTools
  position: relative

-  .toolbarSectionButton.active>.toolbarSectionDrawerContainer
-    opacity: 1
-    transform(translateX(-50%) translateY(0) scale(1))
+  .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))

  .toolbarSectionDrawerContainer
    bottom: - $toolbarDrawerHeight
@ -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))