chore(bidirectional-tool): Clean up longest/shortest diameters calculation

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

@@ -0,0 +1,32 @@
+// Calculate the longest and shortest diameters for the given measurementData
+export default function(eventData, measurementData) {
+    const { rowPixelSpacing, columnPixelSpacing } = eventData.image;
+    const { start, end, perpendicularStart, perpendicularEnd } = measurementData.handles;
+
+    // updatePerpendicularLineHandles(eventData, measurementData);
+
+    // Calculate the long axis length
+    const dx = (start.x - end.x) * (columnPixelSpacing || 1);
+    const dy = (start.y - end.y) * (rowPixelSpacing || 1);
+    let length = Math.sqrt(dx * dx + dy * dy);
+
+    // Calculate the short axis length
+    const wx = (perpendicularStart.x - perpendicularEnd.x) * (columnPixelSpacing || 1);
+    const wy = (perpendicularStart.y - perpendicularEnd.y) * (rowPixelSpacing || 1);
+    let width = Math.sqrt(wx * wx + wy * wy);
+    if (!width) {
+        width = 0;
+    }
+
+    // Length is always longer than width
+    if (width > length) {
+        const tempW = width;
+        const tempL = length;
+        length = tempW;
+        width = tempL;
+    }
+
+    // Set measurement text to show lesion table
+    measurementData.longestDiameter = length.toFixed(1);
+    measurementData.shortestDiameter = width.toFixed(1);
+}

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

@@ -1,5 +1,6 @@
 import { cornerstone } from 'meteor/ohif:cornerstone';
 import setHandlesPosition from './setHandlesPosition';
+import calculateLongestAndShortestDiameters from '../calculateLongestAndShortestDiameters';
 
 export default function (mouseEventData, toolType, data, handle, doneMovingCallback, preventHandleOutsideImage) {
     const element = mouseEventData.element;
@@ -29,14 +30,23 @@ export default function (mouseEventData, toolType, data, handle, doneMovingCallb
 
         cornerstone.updateImage(element);
 
-        const eventType = 'cornerstonetoolsmeasurementmodified';
+        const measurementModifiedHandler = () => {
-        const modifiedEventData = {
+            const eventType = 'cornerstonetoolsmeasurementmodified';
-            toolType,
+            const modifiedEventData = {
-            element,
+                toolType,
-            measurementData: data
+                element,
+                measurementData: data
+            };
+
+            calculateLongestAndShortestDiameters(mouseEventData, data);
+
+            cornerstone.triggerEvent(element, eventType, modifiedEventData);
+
+            element.removeEventListener('cornerstoneimagerendered', measurementModifiedHandler);
         };
 
-        cornerstone.triggerEvent(element, eventType, modifiedEventData);
+        // Wait on image render before triggering the modified event
+        element.addEventListener('cornerstoneimagerendered', measurementModifiedHandler);
     };
 
     element.addEventListener('cornerstonetoolsmousedrag', mouseDragCallback);

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

@@ -2,6 +2,7 @@ import { cornerstone, cornerstoneMath, cornerstoneTools } from 'meteor/ohif:corn
 import { OHIF } from 'meteor/ohif:core';
 import { toolType } from '../definitions';
 import drawHandles from './drawHandles';
+import calculateLongestAndShortestDiameters from '../calculateLongestAndShortestDiameters';
 import updatePerpendicularLineHandles from '../updatePerpendicularLineHandles';
 import drawPerpendicularLine from './drawPerpendicularLine';
 import drawSelectedMarker from './drawSelectedMarker';
@@ -41,11 +42,9 @@ export default function(event) {
 
     for (let i = 0; i < toolData.data.length; i++) {
         const data = toolData.data[i];
-        if (data.visible === false) {
+        if (data.visible === false) continue;
-          continue;
-        }
 
-        const { start, end, perpendicularStart, perpendicularEnd, textBox } = data.handles;
+        const { start, end, textBox } = data.handles;
         const strokeWidth = lineWidth;
 
         context.save();
@@ -93,26 +92,8 @@ export default function(event) {
         // Draw the selected marker
         drawSelectedMarker(eventData, data.handles, '#FF9999');
 
-        // Calculate the long axis length
+        // Calculate the longest and shortest diameters, storing it in the respective attributes
-        const dx = (start.x - end.x) * (colPixelSpacing || 1);
+        calculateLongestAndShortestDiameters(eventData, data);
-        const dy = (start.y - end.y) * (rowPixelSpacing || 1);
-        let length = Math.sqrt(dx * dx + dy * dy);
-
-        // Calculate the short axis length
-        const wx = (perpendicularStart.x - perpendicularEnd.x) * (colPixelSpacing || 1);
-        const wy = (perpendicularStart.y - perpendicularEnd.y) * (rowPixelSpacing || 1);
-        let width = Math.sqrt(wx * wx + wy * wy);
-        if (!width) {
-            width = 0;
-        }
-
-        // Length is always longer than width
-        if (width > length) {
-            const tempW = width;
-            const tempL = length;
-            length = tempW;
-            width = tempL;
-        }
 
         if (data.measurementNumber) {
             // Draw the textbox
@@ -121,9 +102,14 @@ export default function(event) {
                 suffix = ' pixels';
             }
 
-            const lengthText = ' L ' + length.toFixed(1) + suffix;
+            const lengthText = ' L ' + data.longestDiameter + suffix;
-            const widthText = ' W ' + width.toFixed(1) + suffix;
+            const widthText = ' W ' + data.shortestDiameter + suffix;
-            const textLines = [`Target ${data.measurementNumber}`, lengthText, widthText];
+            let textLines = [`Target ${data.measurementNumber}`, lengthText, widthText];
+
+            // Append extra text lines when applies
+            if (data.additionalData && Array.isArray(data.additionalData.extraTextLines)) {
+                textLines = textLines.concat(data.additionalData.extraTextLines);
+            }
 
             const boundingBox = cornerstoneTools.drawTextBox(
                 context,
@@ -208,10 +194,6 @@ export default function(event) {
             context.stroke();
         }
 
-        // Set measurement text to show lesion table
-        data.longestDiameter = length.toFixed(1);
-        data.shortestDiameter = width.toFixed(1);
-
         context.restore();
     }
 }