LT-322: Change of Dashed Line to Target and Non-Target tools in order to not obscure the text

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

@@ -1011,18 +1011,6 @@
             // draw the handles
             cornerstoneTools.drawHandles(context, eventData, data.handles, color);
 
-            //Draw linked line as dashed
-            context.beginPath();
-            context.strokeStyle = color;
-            context.lineWidth = strokeWidth;
-            context.setLineDash([ 2, 3 ]);
-
-            // Set position of text
-            var perpendicularStartCanvas = cornerstone.pixelToCanvas(element, findDottedLinePosition(data));
-            context.moveTo(perpendicularStartCanvas.x, perpendicularStartCanvas.y);
-            context.lineTo(canvasTextLocation.x + 20, canvasTextLocation.y + 40);
-            context.stroke();
-
             // Calculate the long axis length
             var dx = (data.handles.start.x - data.handles.end.x) * (eventData.image.columnPixelSpacing || 1);
             var dy = (data.handles.start.y - data.handles.end.y) * (eventData.image.rowPixelSpacing || 1);
@@ -1060,6 +1048,53 @@
 
             data.handles.textBox.boundingBox = boundingBox;
 
+            // Draw linked line as dashed
+            var link = {
+                start: {},
+                end: {}
+            };
+
+            var midpointCanvas = {
+                x: (handleStartCanvas.x + handleEndCanvas.x) / 2,
+                y: (handleStartCanvas.y + handleEndCanvas.y) / 2,
+            };
+
+            var points = [ handleStartCanvas, handleEndCanvas, midpointCanvas ];
+
+            link.end.x = canvasTextLocation.x;
+            link.end.y = canvasTextLocation.y;
+
+            link.start = cornerstoneMath.point.findClosestPoint(points, link.end);
+
+            var boundingBoxPoints = [ {
+                    // Top middle point of bounding box
+                    x: boundingBox.left + boundingBox.width / 2,
+                    y: boundingBox.top
+                }, {
+                    // Left middle point of bounding box
+                    x: boundingBox.left,
+                    y: boundingBox.top + boundingBox.height / 2
+                }, {
+                    // Bottom middle point of bounding box
+                    x: boundingBox.left + boundingBox.width / 2,
+                    y: boundingBox.top + boundingBox.height
+                }, {
+                    // Right middle point of bounding box
+                    x: boundingBox.left + boundingBox.width,
+                    y: boundingBox.top + boundingBox.height / 2
+                },
+            ];
+
+            link.end = cornerstoneMath.point.findClosestPoint(boundingBoxPoints, link.start);
+            context.beginPath();
+            context.strokeStyle = color;
+            context.lineWidth = lineWidth;
+            context.setLineDash([ 2, 3 ]);
+
+            context.moveTo(link.start.x, link.start.y);
+            context.lineTo(link.end.x, link.end.y);
+            context.stroke();
+
             // Set measurement text to show lesion table
             data.longestDiameter = length.toFixed(1);
             data.shortestDiameter = width.toFixed(1);

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

@@ -222,23 +222,56 @@
 
             // Draw the text
             if (data.measurementNumber) {
+                
+                var boundingBox = cornerstoneTools.drawTextBox(context, 'Non-Target ' + data.measurementNumber, canvasTextLocation.x, canvasTextLocation.y, color);
+                data.handles.textBox.boundingBox = boundingBox;
+
                 // Draw linked line as dashed
-                var mid = {
+                var link = {
-                    x: (handleStartCanvas.x + handleEndCanvas.x) / 2,
+                    start: {},
-                    y: (handleStartCanvas.y + handleEndCanvas.y) / 2
+                    end: {}
                 };
 
+                var midpointCanvas = {
+                    x: (handleStartCanvas.x + handleEndCanvas.x) / 2,
+                    y: (handleStartCanvas.y + handleEndCanvas.y) / 2,
+                };
+
+                var points = [ handleStartCanvas, handleEndCanvas, midpointCanvas ];
+
+                link.end.x = canvasTextLocation.x;
+                link.end.y = canvasTextLocation.y;
+
+                link.start = cornerstoneMath.point.findClosestPoint(points, link.end);
+
+                var boundingBoxPoints = [ {
+                        // Top middle point of bounding box
+                        x: boundingBox.left + boundingBox.width / 2,
+                        y: boundingBox.top
+                    }, {
+                        // Left middle point of bounding box
+                        x: boundingBox.left,
+                        y: boundingBox.top + boundingBox.height / 2
+                    }, {
+                        // Bottom middle point of bounding box
+                        x: boundingBox.left + boundingBox.width / 2,
+                        y: boundingBox.top + boundingBox.height
+                    }, {
+                        // Right middle point of bounding box
+                        x: boundingBox.left + boundingBox.width,
+                        y: boundingBox.top + boundingBox.height / 2
+                    },
+                ];
+
+                link.end = cornerstoneMath.point.findClosestPoint(boundingBoxPoints, link.start);
                 context.beginPath();
                 context.strokeStyle = color;
                 context.lineWidth = lineWidth;
                 context.setLineDash([ 2, 3 ]);
 
-                context.moveTo(mid.x, mid.y);
+                context.moveTo(link.start.x, link.start.y);
-                context.lineTo(canvasTextLocation.x + 20, canvasTextLocation.y + 20);
+                context.lineTo(link.end.x, link.end.y);
                 context.stroke();
-
-                var boundingBox = cornerstoneTools.drawTextBox(context, 'Non-Target ' + data.measurementNumber, canvasTextLocation.x, canvasTextLocation.y, color);
-                data.handles.textBox.boundingBox = boundingBox;
             }
 
             context.restore();

Packages/ohif-viewerbase/lib/toolManager.js

@@ -19,7 +19,7 @@ function configureTools() {
 
     // Get Cornerstone Tools
     const { panMultiTouch, textStyle, toolStyle, toolColors, length, 
-            bidirectional, arrowAnnotate, zoom, ellipticalRoi } = cornerstoneTools;
+            bidirectional, arrowAnnotate, zoom, ellipticalRoi, nonTarget } = cornerstoneTools;
 
     // Set the configuration for the multitouch pan tool
     const multiTouchPanConfig = {
@@ -53,6 +53,7 @@ function configureTools() {
     const lengthConfig = length.getConfiguration();
     const bidirectionalConfig = bidirectional.getConfiguration();
     const ellipticalRoiConfig = ellipticalRoi.getConfiguration();
+    const nonTargetConfig = nonTarget.getConfiguration();
 
     // Add shadow to length tool 
     length.setConfiguration({
@@ -72,6 +73,12 @@ function configureTools() {
         ...shadowConfig
     });
 
+     // Add shadow to non target tool
+    nonTarget.setConfiguration({
+        ...nonTargetConfig,
+        ...shadowConfig
+    });
+
     // Set the configuration values for the text annotation (Arrow) tool
     const annotateConfig = {
         getTextCallback: getAnnotationTextCallback,