LT-291: Allowing changing the non-targets location and response

Packages/ohif-design/styles/common/global.styl

@@ -51,6 +51,9 @@ label.form-group
   -ms-user-select: none
   user-select: none
 
+.btn
+  transition(background-color 0.3s ease)
+
 .modal-dialog
   .modal-content
     theme('background', '$primaryBackgroundColor')
@@ -63,3 +66,15 @@ label.form-group
   button.close
     theme('color', '$textSecondaryColor')
     opacity: 1
+    overflow: hidden
+    text-align: center
+    text-shadow: none
+    width: 20px
+
+    span
+      display: block
+      line-height: 20px
+      transition(transform 0.3s ease)
+
+    &:hover span
+      transform(rotate(180deg))

Packages/ohif-design/styles/components/select2.styl

@@ -3,13 +3,19 @@
 // TODO: [design] can't we use colors that are already in common pallete?
 $gray1 = #C3C3C3
 $gray2 = #B6B6B6
-$gray3 = #676767
-$gray4 = #3E3E3E
+$gray3 = #A6A6A6
+$gray4 = #676767
+$gray5 = #3E3E3E
 $borderRadius = 2px
 
 span.select2.select2-container
   font-weight: normal
 
+  span.select2-selection
+    &:hover, &:focus
+      span.select2-selection__arrow
+        background-color: $gray3
+
   span.select2-selection
     border: 0
     border-radius: $borderRadius
@@ -28,6 +34,7 @@ span.select2.select2-container
     border-bottom-right-radius: $borderRadius
     right: 0
     top: 0
+    transition(background-color 0.3s ease)
     width: 20px
 
     b
@@ -38,20 +45,20 @@ span.select2.select2-container
     min-height: 30px
 
     input.select2-search__field
-      color: $gray4
-      placeholder-color($gray4)
+      color: $gray5
+      placeholder-color($gray5)
 
     li.select2-selection__choice
       theme('border-color', '$uiGray')
       background-color: #FFF
       border-radius: $borderRadius
-      color: $gray4
+      color: $gray5
       font-size: 12px
       line-height: 22px
       margin-top: 3px
 
     span.select2-selection__choice__remove
-      color: $gray3
+      color: $gray4
       float: right
       font-size: 20px
       font-weight: 300

Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js

@@ -1,10 +1,13 @@
+import { _ } from 'meteor/underscore';
+import { OHIF } from 'meteor/ohif:core';
+
 (function($, cornerstone, cornerstoneMath, cornerstoneTools) {
 
     'use strict';
 
-    var toolType = 'nonTarget';
+    const toolType = 'nonTarget';
 
-    var configuration = {
+    const configuration = {
         getMeasurementLocationCallback: getMeasurementLocationCallback,
         changeMeasurementLocationCallback: changeMeasurementLocationCallback,
         drawHandles: false,
@@ -13,44 +16,60 @@
     };
 
     // Used to cancel tool placement
-    var keys = {
+    const keys = {
         ESC: 27
     };
+
+    const toolMethods = {
+        removeMeasurement() {
+
+        }
+    };
+
+    const showLocationDialog = settings => {
+        const dialogSettings = _.extend({
+            title: 'Lesion Location',
+            toolMethods
+        }, settings);
+        OHIF.ui.showFormDialog('dialogNonTargetMeasurement', dialogSettings);
+    };
+
     // Define a callback to get your text annotation
     // This could be used, e.g. to open a modal
-    function getMeasurementLocationCallback(measurementData, eventData, doneCallback) {
-        const dialogSettings = {
+    function getMeasurementLocationCallback(measurementData, eventData) {
+        showLocationDialog({
             title: 'Select Lesion Location',
             measurementData,
             eventData
-        };
-        OHIF.ui.showFormDialog('dialogNonTargetMeasurement', dialogSettings).then(formData => {
-            doneCallback(formData.measurementNumber);
         });
     }
 
-    function changeMeasurementLocationCallback(measurementData, eventData, doneCallback) {
-        doneCallback(prompt('Change your measurement location:'));
+    function changeMeasurementLocationCallback(measurementData, eventData) {
+        showLocationDialog({
+            title: 'Select Lesion Location',
+            measurementData,
+            eventData,
+            edit: true
+        });
     }
 
     /// --- Mouse Tool --- ///
     ///////// BEGIN ACTIVE TOOL ///////
     function addNewMeasurement(mouseEventData) {
-        var element = mouseEventData.element;
+        const element = mouseEventData.element;
 
-        function doneCallback(measurementNumber) {
-            measurementData.measurementNumber = measurementNumber;
+        function doneCallback() {
             measurementData.active = true;
             cornerstone.updateImage(element);
         }
 
-        var measurementData = createNewMeasurement(mouseEventData);
+        const measurementData = createNewMeasurement(mouseEventData);
 
-        var eventData = {
+        const eventData = {
             mouseButtonMask: mouseEventData.which
         };
 
-        var config = cornerstoneTools.nonTarget.getConfiguration();
+        const config = cornerstoneTools.nonTarget.getConfiguration();
 
         // associate this data with this imageId so we can render it and manipulate it
         cornerstoneTools.addToolState(mouseEventData.element, toolType, measurementData);
@@ -63,7 +82,7 @@
         $(element).off('CornerstoneToolsMouseDoubleClick', doubleClickCallback);
 
         // Add a flag for using Esc to cancel tool placement
-        var cancelled = false;
+        let cancelled = false;
         function cancelCallback(e) {
             // If the Esc key was pressed, set the flag to true
             if (e.which === keys.ESC) {
@@ -284,8 +303,7 @@
     function addNewMeasurementTouch(touchEventData) {
         var element = touchEventData.element;
 
-        function doneCallback(measurementNumber) {
-            measurementData.measurementNumber = measurementNumber;
+        function doneCallback() {
             measurementData.active = true;
             cornerstone.updateImage(element);
         }

Packages/ohif-lesiontracker/client/components/dialog/nonTargetMeasurement.html

@@ -1,6 +1,5 @@
 <template name="dialogNonTargetMeasurement">
     {{#dialogForm (extend this dialogClass='modal-sm' schema=(choose this.schema instance.schema))}}
-        {{>inputHidden key='measurementNumber'}}
         {{>inputSelect labelClass='form-group' key='location' hideSearch=true
             options=(clone placeholder='Choose a lesion location')}}
         {{>inputSelect labelClass='form-group' key='response' hideSearch=true

Packages/ohif-lesiontracker/client/components/dialog/nonTargetMeasurement.js

@@ -9,19 +9,18 @@ Template.dialogNonTargetMeasurement.onCreated(() => {
 
     instance.schema = new SimpleSchema({
         location: FieldLesionLocation,
-        response: FieldLesionLocationResponse,
-        measurementNumber: {
-            type: Number
-        }
+        response: FieldLesionLocationResponse
     });
 });
 
 Template.dialogNonTargetMeasurement.onRendered(() => {
     const instance = Template.instance();
 
+    const element = instance.data.eventData.element;
+
     const form = instance.$('form').data('component');
 
-    const viewerMain = $(instance.data.eventData.element).closest('.viewerMain')[0];
+    const viewerMain = $(element).closest('.viewerMain')[0];
     const viewerData = Blaze.getData(viewerMain);
     console.warn('>>>>dialogData/viewerData', instance.data, viewerData);
 
@@ -36,17 +35,27 @@ Template.dialogNonTargetMeasurement.onRendered(() => {
         _id: measurementData._id
     });
 
+    // Set the data that is already defined
+    form.value(currentMeasurement);
+
     // Synchronize the measurement number with the one inserted in the collection
     measurementData.measurementNumber = currentMeasurement.measurementNumber;
 
-    // Delete the measurement if dialog is closed
+    // Refresh the image with the measurement number
+    cornerstone.updateImage(element);
+
+    // Delete the measurement from collection when dialog is closed and not on edit mode
     instance.data.promise.catch(() => {
+        if (instance.data.edit) {
+            return;
+        }
+
         viewerData.measurementApi.deleteMeasurements('nonTargets', {
             _id: measurementData._id
         });
 
-        // Repaint the images on all viewports without the removed measurements
-        _.each($('.imageViewerViewport'), element => cornerstone.updateImage(element));
+        // Refresh the image with the measurement removed
+        cornerstone.updateImage(element);
     });
 
     // Update the location and response after confirming the dialog data
@@ -61,9 +70,4 @@ Template.dialogNonTargetMeasurement.onRendered(() => {
         });
     });
 
-    // Inject the measurement number in form data to enable the tool from getting the value
-    form.value({
-        measurementNumber: currentMeasurement.measurementNumber
-    });
-
 });