LT-370: Repositioning the Add label button

Packages/ohif-core/client/components/base/mixins/formItem.js

@@ -183,7 +183,7 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 }
 
                 // Create the data document for validation
-                const document = OHIF.blaze.getNestedObject({
+                const document = OHIF.object.getNestedObject({
                     [key]: component.value()
                 });
 

Packages/ohif-core/client/lib/cornerstone.js

@@ -0,0 +1,28 @@
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.cornerstone = {};
+
+OHIF.cornerstone.pixelToPage = (element, position) => {
+    const enabledElement = cornerstone.getEnabledElement(element);
+    const result = {
+        x: 0,
+        y: 0
+    };
+
+    // Stop here if the cornerstone element is not enabled or position is not an object
+    if (!enabledElement || typeof position !== 'object') {
+        return result;
+    }
+
+    const canvas = enabledElement.canvas;
+
+    const canvasOffset = $(canvas).offset();
+    result.x += canvasOffset.left;
+    result.y += canvasOffset.top;
+
+    const canvasPosition = cornerstone.pixelToCanvas(element, position);
+    result.x += canvasPosition.x;
+    result.y += canvasPosition.y;
+
+    return result;
+};

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

@@ -1,4 +1,5 @@
 import './blaze.js';
+import './cornerstone.js';
 import './object.js';
 import './string.js';
 import './ui.js';

Packages/ohif-core/client/lib/object.js

@@ -3,7 +3,7 @@ import { OHIF } from 'meteor/ohif:core';
 OHIF.object = {};
 
 // Transforms a shallow object with keys separated by "." into a nested object
-OHIF.blaze.getNestedObject = shallowObject => {
+OHIF.object.getNestedObject = shallowObject => {
     var nestedObject = {};
     for (var key in shallowObject) {
         var value = shallowObject[key];
@@ -27,7 +27,7 @@ OHIF.blaze.getNestedObject = shallowObject => {
 };
 
 // Transforms a nested object into a shallowObject merging its keys with "." character
-OHIF.blaze.getShallowObject = nestedObject => {
+OHIF.object.getShallowObject = nestedObject => {
     var shallowObject = {};
     var putValues = function(baseKey, nestedObject, resultObject) {
         for (var key in nestedObject) {

Packages/ohif-lesiontracker/client/components/measurementLocationDialog/measurementLocationDialog.js

@@ -39,18 +39,24 @@ Template.measurementLocationDialog.onCreated(() => {
     const measurementApi = instance.data.measurementApi;
     const timepointApi = instance.data.timepointApi;
 
-    const toggleLabel = (measurementData, eventdata, doneCallback) => {
-        const position = _.clone(eventdata.currentPoints.page);
-        position.x += 20;
-        position.y += 20;
-        
+    const toggleLabel = (measurementData, eventData, doneCallback) => {
+        const getHandlePosition = key => _.pick(measurementData.handles[key], ['x', 'y']);
+        const start = getHandlePosition('start');
+        const end = getHandlePosition('end');
+        const getDirection = axis => start[axis] < end[axis] ? 1 : -1;
+        const position = OHIF.cornerstone.pixelToPage(eventData.element, end);
+
         OHIF.measurements.toggleLabelButton({
             instance,
             measurementId: measurementData._id,
             toolType: measurementData.toolType,
-            element: eventdata.element,
+            element: eventData.element,
             measurementApi: instance.data.measurementApi,
-            position: position
+            position: position,
+            direction: {
+                x: getDirection('x'),
+                y: getDirection('y')
+            }
         });
     };
 
@@ -111,4 +117,4 @@ Template.measurementLocationDialog.events({
 
         closeHandler(dialog);
     }
-});
+});

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

@@ -1,8 +1,8 @@
 <template name="measureFlow">
     <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"
+         style="top:{{choose position.y 0}}px; left:{{choose position.x 0}}px"
          tabindex="-1">
-        <button class="btn-add">
+        <button class="btn-add" style="visibility: hidden">
             {{#if this.measurement.location}}Edit{{else}}Add{{/if}} label
         </button>
         {{#if eq instance.state.get 'selected'}}

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

@@ -76,17 +76,39 @@ Template.measureFlow.onCreated(() => {
 
 Template.measureFlow.onRendered(() => {
     const instance = Template.instance();
+    const $measureFlow = instance.$('.measure-flow');
+    const $btnAdd = instance.$('.btn-add');
 
     // Make the measure flow bounded by the window borders
-    instance.$('.measure-flow').bounded();
+    $measureFlow.bounded();
 
-    instance.$('.btn-add').focus();
+    $btnAdd.focus();
 
     if (instance.data.autoClick) {
-        instance.$('.btn-add').hide().trigger('click', {
+        $btnAdd.trigger('click', {
             clientX: instance.data.position.x,
             clientY: instance.data.position.Y
         });
+    } else {
+        if (instance.data.direction) {
+            const direction = instance.data.direction;
+            let { left, top } = $measureFlow.offset();
+
+            left = direction.x === -1 ? left -= $btnAdd.outerWidth() : left;
+            top = direction.y === -1 ? top -= $btnAdd.outerHeight() : top;
+
+            const distance = 5;
+            left += direction.x * distance;
+            top += direction.y * distance;
+
+            $measureFlow.css({
+                left,
+                top
+            });
+        }
+
+        // Display the button after reposition it
+        $btnAdd.css('visibility', '');
     }
 });
 

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

@@ -31,6 +31,7 @@ OHIF.measurements.toggleLabelButton = options => {
     const data = {
         measurement,
         position: options.position,
+        direction: options.direction,
         threeColumns: true,
         hideCommon: true,
         autoClick: options.autoClick,