LT-275: Adding button to add labels to measurements

Packages/ohif-core/client/components/playground/playground.html

@@ -1,5 +1,5 @@
 <template name="componentPlayground">
     <div class="component-playground">
-        {{>measureFlow treeColumns=true hideCommon=true}}
+        {{>measureFlow threeColumns=true hideCommon=true}}
     </div>
 </template>

Packages/ohif-measurements/client/components/measureFlow/measureFlow.html

@@ -1,5 +1,5 @@
 <template name="measureFlow">
-    <div class="measure-flow {{#if this.treeColumns}}tree-columns{{/if}} {{instance.state.get}}" style="position:fixed; top:200px; left:400px">
+    <div class="measure-flow {{#if this.threeColumns}}tree-columns{{/if}} {{instance.state.get}}" style="top:{{choose position.y 0}}px;left:{{choose position.x 0}}px">
         <button class="btn-add">Add label</button>
         {{#if eq instance.state.get 'selected'}}
             <div class="tree-leaf">

Packages/ohif-measurements/client/components/measureFlow/measureFlow.js

@@ -79,6 +79,10 @@ Template.measureFlow.onRendered(() => {
 });
 
 Template.measureFlow.events({
+    'click, mousedown, mouseup'(event, instance) {
+        event.stopPropagation();
+    },
+
     'click .measure-flow .btn-add, click .measure-flow .btn-rename'(event, instance) {
         // Set the open state for the component
         instance.state.set('open');
@@ -100,7 +104,7 @@ Template.measureFlow.events({
                 label: 'Assign label',
                 searchPlaceholder: 'Search labels',
                 storageKey: 'measureLabelCommon',
-                treeColumns: instance.data.treeColumns,
+                threeColumns: instance.data.threeColumns,
                 position
             };
 

Packages/ohif-measurements/client/components/measureFlow/measureFlow.styl

@@ -1,7 +1,8 @@
 @import "{design}/app"
 
 .measure-flow
-  position: relative
+  position: fixed
+  z-index: 1
 
   &.open,
   &.selected
@@ -73,7 +74,7 @@
       button
         theme('border', '1px solid $uiBorderColor')
         theme('color', '$textPrimaryColor')
-        background-color: transparent
+        theme('background-color', '$primaryBackgroundColor')
         border-radius: 16px
         font-weight: normal
         height: 31px

Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTree.js

@@ -64,9 +64,9 @@ Template.selectTree.onRendered(() => {
     instance.component = component;
 
     // Set the margin to display the common section
-    const isTreeColumns = instance.data.treeColumns;
-    const marginProperty = isTreeColumns ? 'margin-left' : 'margin-right';
-    const marginWidth = isTreeColumns ? $treeRoot.width() / 2 : $treeRoot.width();
+    const isthreeColumns = instance.data.threeColumns;
+    const marginProperty = isthreeColumns ? 'margin-left' : 'margin-right';
+    const marginWidth = isthreeColumns ? $treeRoot.width() / 2 : $treeRoot.width();
     $treeRoot.children('.tree-content').css(marginProperty, marginWidth);
 
     // Make the component respect the window boundaries
@@ -318,7 +318,7 @@ Template.selectTree.helpers({
         }
 
         // Return the items sorted for tree columns
-        if (instance.data.treeColumns) {
+        if (instance.data.threeColumns) {
             const begin = items.splice(0, Math.ceil(items.length / 2));
             const sortedItems = [];
             _.each(begin, (item, index) => {

Packages/ohif-measurements/client/components/measureFlow/selectTree/selectTreeCommon.js

@@ -4,6 +4,8 @@ import { _ } from 'meteor/underscore';
 
 Template.selectTreeCommon.events({
     'click .select-tree-common label'(event, instance) {
+        event.preventDefault();
+
         // Get the clicked label
         const $target = $(event.currentTarget);
 

Packages/ohif-measurements/client/hooks/index.js

@@ -0,0 +1 @@
+import './viewer/imageViewerViewport.js';

Packages/ohif-measurements/client/hooks/viewer/imageViewerViewport.js

@@ -0,0 +1,27 @@
+import { Template } from 'meteor/templating';
+import { OHIF } from 'meteor/ohif:core';
+
+Template.imageViewerViewport.events({
+    CornerstoneToolsMouseClick(event, instance, data) {
+        const toolState = cornerstoneTools.getToolState(instance.element, 'bidirectional');
+
+        // Stop here if no tool state was found
+        if (!toolState) {
+            return;
+        }
+
+        setTimeout(() => {
+            for (let i = 0; i < toolState.data.length; i++) {
+                const toolData = toolState.data[i];
+                if (toolData.active) {
+                    OHIF.measurements.toggleLabelButton({
+                        instance,
+                        toolData,
+                        position: data.currentPoints.page
+                    });
+                    break;
+                }
+            }
+        });
+    }
+});

Packages/ohif-measurements/client/index.js

@@ -1,3 +1,4 @@
 import './lib';
 import './helpers';
 import './components';
+import './hooks';

Packages/ohif-measurements/client/lib/index.js

@@ -8,3 +8,4 @@ import './hangingProtocolCustomizations.js';
 import './MeasurementHandlers.js';
 import './MeasurementManager.js';
 import './syncMeasurementAndToolData.js';
+import './toggleLabelButton.js';

Packages/ohif-measurements/client/lib/toggleLabelButton.js

@@ -0,0 +1,26 @@
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.measurements.toggleLabelButton = options => {
+    const removeButtonView = () => {
+        Blaze.remove(options.instance.buttonView);
+        options.instance.buttonView = null;
+    };
+
+    if (options.instance.buttonView) {
+        removeButtonView();
+    } else {
+        const data = {
+            position: options.position,
+            threeColumns: true,
+            hideCommon: true,
+            doneCallback(data) {
+                console.warn('>>>>DONE CALLBACK', data);
+                removeButtonView();
+            }
+        };
+        const view = Blaze.renderWithData(Template.measureFlow, data, options.instance.element);
+        options.instance.buttonView = view;
+    }
+};

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

@@ -452,6 +452,7 @@ Template.imageViewerViewport.onRendered(function() {
 
     // When the imageViewerViewport template is rendered
     var element = this.find('.imageViewerViewport');
+    this.element = element;
 
     // Display the loading indicator for this element
     $(element).siblings('.imageViewerLoadingIndicator').css('display', 'block');
@@ -504,9 +505,9 @@ Template.imageViewerViewport.onDestroyed(function() {
     // Try to stop any currently playing clips
     // Otherwise the interval will continuously throw errors
     try {
-        var enabledElement = cornerstone.getEnabledElement(element);
+        var enabledElement = cornerstone.getEnabledElement(this.element);
         if (enabledElement) {
-            cornerstoneTools.stopClip(element);
+            cornerstoneTools.stopClip(this.element);
         }
     } catch (error) {
         OHIF.log.warn(error);
@@ -515,7 +516,7 @@ Template.imageViewerViewport.onDestroyed(function() {
     // Disable the viewport element with Cornerstone
     // This also triggers the removal of the element from all available
     // synchronizers, such as the one used for reference lines.
-    cornerstone.disable(element);
+    cornerstone.disable(this.element);
 });
 
 Template.imageViewerViewport.events({