OHIF-155: tools: textBox anchor (center)

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

@@ -28,7 +28,7 @@ OHIF.cornerstone.pixelToPage = (element, position) => {
     return result;
 };
 
-OHIF.cornerstone.repositionTextBox = (eventData, measurementData) => {
+OHIF.cornerstone.repositionTextBox = (eventData, measurementData, config) => {
     // Stop here if it's not a measurement creating
     if (!measurementData.isCreating) {
         return;
@@ -126,6 +126,37 @@ OHIF.cornerstone.repositionTextBox = (eventData, measurementData) => {
         };
     };
 
+    function getTextBoxOffset(config, cornerAxis, toolAxis, boxSize) {
+        config = config || {};
+        const centering = config.centering || {};
+        const centerX = !!centering.x;
+        const centerY = !!centering.y;
+        const halfBoxSizeX = boxSize.x / 2;
+        const halfBoxSizeY = boxSize.y / 2;
+        const offset = {
+            x: [],
+            y: []
+        }
+
+        if(cornerAxis === 'x') {
+            const offsetY = centerY ? 0 : halfBoxSizeY;
+
+            offset.x[-1] = centerX ? halfBoxSizeX : 0;
+            offset.x[1] = centerX ? -halfBoxSizeX : -boxSize.x;
+            offset.y[-1] = offsetY;
+            offset.y[1] = offsetY;
+        } else {
+            const offsetX = centerX ? 0 : halfBoxSizeX;
+
+            offset.x[-1] = offsetX;
+            offset.x[1] = offsetX;
+            offset.y[-1] = centerY ? halfBoxSizeY : 0;
+            offset.y[1] = centerY ? -halfBoxSizeY : -boxSize.y;
+        }
+
+        return offset;
+    }
+
     const handles = measurementData.handles;
     const textBox = handles.textBox;
 
@@ -202,13 +233,11 @@ OHIF.cornerstone.repositionTextBox = (eventData, measurementData) => {
     const boxSize = getTextBoxSizeInPixels(element, bounds);
 
     textBox[cornerAxis] = cornerAxisPosition;
-    textBox[toolAxis] = tool[toolAxis] - (boxSize[toolAxis] / 2);
+    textBox[toolAxis] = tool[toolAxis];
 
     // Adjust the text box position reducing its size from the corner axis
-    const isDirectionPositive = directions[cornerAxis] > 0;
+    const textBoxOffset = getTextBoxOffset(config, cornerAxis, toolAxis, boxSize);
-    if ((foundPlace && !isDirectionPositive) || (!foundPlace && isDirectionPositive)) {
+    textBox[cornerAxis] += textBoxOffset[cornerAxis][directions[cornerAxis]];
-        textBox[cornerAxis] -= boxSize[cornerAxis];
-    }
 
     // Preventing the text box from partially going outside the canvas area
     const topLeft = cornerstone.pixelToCanvas(element, textBox);

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

@@ -7,12 +7,15 @@ import { Viewerbase } from 'meteor/ohif:viewerbase';
 
     var toolType = 'bidirectional';
 
-    const shadowConfig = Viewerbase.toolManager.getToolDefaultStates().shadowConfig;
+    const toolDefaultStates = Viewerbase.toolManager.getToolDefaultStates();
+    const shadowConfig = toolDefaultStates.shadowConfig;
+    const textBoxConfig = toolDefaultStates.textBoxConfig;
 
     var configuration = {
         getMeasurementLocationCallback: getMeasurementLocationCallback,
         changeMeasurementLocationCallback: changeMeasurementLocationCallback,
-        ...shadowConfig
+        ...shadowConfig,
+        textBox: textBoxConfig
     };
 
     // Used to cancel tool placement
@@ -1018,11 +1021,11 @@ import { Viewerbase } from 'meteor/ohif:viewerbase';
 
                 var boundingBox = cornerstoneTools.drawTextBox(context,
                     textLines,
-                    canvasTextLocation.x, canvasTextLocation.y, color);
+                    canvasTextLocation.x, canvasTextLocation.y, color, config.textBox);
 
                 data.handles.textBox.boundingBox = boundingBox;
 
-                OHIF.cornerstone.repositionTextBox(eventData, data);
+                OHIF.cornerstone.repositionTextBox(eventData, data, config.textBox);
 
                 // Draw linked line as dashed
                 var link = {

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

@@ -7,7 +7,9 @@ import { Viewerbase } from 'meteor/ohif:viewerbase';
 
     const toolType = 'nonTarget';
 
-    const shadowConfig = Viewerbase.toolManager.getToolDefaultStates().shadowConfig;
+    const toolDefaultStates = Viewerbase.toolManager.getToolDefaultStates();
+    const shadowConfig = toolDefaultStates.shadowConfig;
+    const textBoxConfig = toolDefaultStates.textBoxConfig;
 
     const configuration = {
         getMeasurementLocationCallback: getMeasurementLocationCallback,
@@ -15,7 +17,9 @@ import { Viewerbase } from 'meteor/ohif:viewerbase';
         drawHandles: false,
         drawHandlesOnHover: true,
         arrowFirst: true,
-        ...shadowConfig
+        textBox: textBoxConfig,
+        ...shadowConfig,
+
     };
 
     // Used to cancel tool placement
@@ -253,10 +257,11 @@ import { Viewerbase } from 'meteor/ohif:viewerbase';
             // Draw the text
             if (data.measurementNumber) {
 
-                var boundingBox = cornerstoneTools.drawTextBox(context, `Non-Target ${data.measurementNumber}`, canvasTextLocation.x, canvasTextLocation.y, color);
+                var textLine = `Non-Target ${data.measurementNumber}`;
+                var boundingBox = cornerstoneTools.drawTextBox(context, textLine, canvasTextLocation.x, canvasTextLocation.y, color, config.textBox);
                 data.handles.textBox.boundingBox = boundingBox;
 
-                OHIF.cornerstone.repositionTextBox(eventData, data);
+                OHIF.cornerstone.repositionTextBox(eventData, data, config.textBox);
 
                 // Draw linked line as dashed
                 var link = {

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

@@ -1,3 +1,5 @@
+import { Viewerbase } from 'meteor/ohif:viewerbase';
+
 (function($, cornerstone, cornerstoneMath, cornerstoneTools) {
 
     'use strict';
@@ -12,12 +14,16 @@
         "toolResponse": "EX"
     }];
 
+    const toolDefaultStates = Viewerbase.toolManager.getToolDefaultStates();
+    const textBoxConfig = toolDefaultStates.textBoxConfig;
+
     var configuration = {
         getMeasurementLocationCallback: getMeasurementLocationCallback,
         changeMeasurementLocationCallback: changeMeasurementLocationCallback,
         drawHandles: false,
         drawHandlesOnHover: false,
-        arrowFirst: true
+        arrowFirst: true,
+        textBox: textBoxConfig
     };
 
     // Used to cancel tool placement
@@ -290,7 +296,8 @@
                     context.lineTo(canvasTextLocation.x + 20, canvasTextLocation.y + 20);
                     context.stroke();
 
-                    var boundingBox = cornerstoneTools.drawTextBox(context, `Target ${data.measurementNumber}`, canvasTextLocation.x, canvasTextLocation.y, color);
+                    var textLine = `Target ${data.measurementNumber}`;
+                    var boundingBox = cornerstoneTools.drawTextBox(context, textLine, canvasTextLocation.x, canvasTextLocation.y, color, config.textBox);
                     data.handles.textBox.boundingBox = boundingBox;
                 }
 

Packages/ohif-viewerbase/client/lib/toolManager.js

@@ -38,6 +38,12 @@ let toolDefaultStates = {
         shadowColor: '#000000',
         shadowOffsetX: 0,
         shadowOffsetY: 0
+    },
+    textBoxConfig: {
+        centering: {
+            x: true,
+            y: true
+        }
     }
 };