From 135760659c61f460dbffa2421aa0eb0e22d121b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elo=C3=ADzio=20Salgado?= Date: Mon, 14 Nov 2016 16:51:02 -0200 Subject: [PATCH] LT-322: Change of Dashed Line to Target and Non-Target tools in order to not obscure the text --- .../client/compatibility/bidirectionalTool.js | 59 +++++++++++++++---- .../client/compatibility/nonTargetTool.js | 49 ++++++++++++--- Packages/ohif-viewerbase/lib/toolManager.js | 9 ++- 3 files changed, 96 insertions(+), 21 deletions(-) diff --git a/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool.js b/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool.js index 96be879c1..063f82b87 100644 --- a/Packages/ohif-lesiontracker/client/compatibility/bidirectionalTool.js +++ b/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); diff --git a/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js b/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js index 9dfe2faa3..faf45891d 100644 --- a/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js +++ b/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 = { - x: (handleStartCanvas.x + handleEndCanvas.x) / 2, - y: (handleStartCanvas.y + handleEndCanvas.y) / 2 + 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(mid.x, mid.y); - context.lineTo(canvasTextLocation.x + 20, canvasTextLocation.y + 20); + context.moveTo(link.start.x, link.start.y); + 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(); diff --git a/Packages/ohif-viewerbase/lib/toolManager.js b/Packages/ohif-viewerbase/lib/toolManager.js index dcf22adc3..c60bdac40 100644 --- a/Packages/ohif-viewerbase/lib/toolManager.js +++ b/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,