LT-40: Changing the default position for overlay text callouts

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

@@ -1,4 +1,5 @@
 import { OHIF } from 'meteor/ohif:core';
+import { _ } from 'meteor/underscore';
 
 OHIF.cornerstone = {};
 
@@ -26,3 +27,63 @@ OHIF.cornerstone.pixelToPage = (element, position) => {
 
     return result;
 };
+
+OHIF.cornerstone.repositionTextBoxWhileDragging = (eventData, measurementData) => {
+    const element = eventData.element;
+    const enabledElement = cornerstone.getEnabledElement(element);
+    const $element = $(element);
+    const image = enabledElement.image;
+
+    const modifiedCallback = () => {
+        const handles = measurementData.handles;
+        const textBox = handles.textBox;
+
+        const getHandlePosition = key => _.pick(handles[key], ['x', 'y']);
+        const start = getHandlePosition('start');
+        const end = getHandlePosition('end');
+
+        const calculateAxisCenter = axis => {
+            const a = start[axis];
+            const b = end[axis];
+            const lowest = Math.min(a, b);
+            const highest = Math.max(a, b);
+            return lowest + ((highest - lowest) / 2);
+        };
+
+        const tool = {};
+        tool.x = calculateAxisCenter('x');
+        tool.y = calculateAxisCenter('y');
+
+        const mid = {};
+        mid.x = image.width / 2;
+        mid.y = image.height / 2;
+
+        const directions = {};
+        directions.x = tool.x < mid.x ? -1 : 1;
+        directions.y = tool.y < mid.y ? -1 : 1;
+
+        const points = {};
+        points.x = directions.x < 0 ? 0 : image.width;
+        points.y = directions.y < 0 ? 0 : image.height;
+
+        const diffX = directions.x < 0 ? tool.x : image.width - tool.x;
+        const diffY = directions.y < 0 ? tool.y : image.height - tool.y;
+
+        const cornerAxis = diffY < diffX ? 'y' : 'x';
+        const toolAxis = diffY < diffX ? 'x' : 'y';
+
+        textBox[cornerAxis] = points[cornerAxis];
+        textBox[toolAxis] = tool[toolAxis];
+    };
+
+    const mouseUpCallback = () => {
+        $element.off('CornerstoneToolsMeasurementModified', modifiedCallback);
+    };
+
+    $element.one('CornerstoneToolsMouseDrag', () => {
+        $element.on('CornerstoneToolsMeasurementModified', modifiedCallback);
+    });
+
+    // Using mouseup because sometimes the CornerstoneToolsMouseUp event is not triggered
+    $element.one('mouseup', mouseUpCallback);
+};

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

@@ -1,4 +1,5 @@
 import { toolManager } from 'meteor/ohif:viewerbase';
+import { OHIF } from 'meteor/ohif:core';
 
 (function($, cornerstone, cornerstoneMath, cornerstoneTools) {
 
@@ -42,7 +43,7 @@ import { toolManager } from 'meteor/ohif:viewerbase';
 
     function createNewMeasurement(mouseEventData) {
         // Create the measurement data for this tool with the end handle activated
-        var measurementData = {
+        const measurementData = {
             visible: true,
             active: true,
             handles: {
@@ -98,6 +99,9 @@ import { toolManager } from 'meteor/ohif:viewerbase';
             isDeleted: false,
             toolType: 'bidirectional'
         };
+
+        OHIF.cornerstone.repositionTextBoxWhileDragging(mouseEventData, measurementData);
+
         return measurementData;
     }
 

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

@@ -2,7 +2,7 @@
     <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"
          tabindex="-1">
-        <button class="btn-add" style="visibility: hidden">
+        <button class="btn-add" style="opacity: 0">
             {{#if this.measurement.location}}Edit{{else}}Add{{/if}} label
         </button>
         {{#if eq instance.state.get 'selected'}}

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

@@ -108,7 +108,7 @@ Template.measureFlow.onRendered(() => {
         }
 
         // Display the button after reposition it
-        $btnAdd.css('visibility', '');
+        $btnAdd.css('opacity', 1);
     }
 });