@cornerstonejs/tools 1.70.6 → 1.70.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.70.6",
+  "version": "1.70.7",
   "description": "Cornerstone3D Tools",
   "main": "src/index.ts",
   "types": "dist/types/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.70.6",
+    "@cornerstonejs/core": "^1.70.7",
     "@icr/polyseg-wasm": "0.4.0",
     "@types/offscreencanvas": "2019.7.3",
     "comlink": "^4.4.1",
@@ -59,5 +59,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "6358796a0031d69a9987ce089bbc27b8a3801dc1"
+  "gitHead": "4b6774d20ea66e2fa2815edc042b57565b816959"
 }

package/src/enums/Events.ts

@@ -18,6 +18,12 @@ enum Events {
    */
   TOOL_ACTIVATED = 'CORNERSTONE_TOOLS_TOOL_ACTIVATED',
 
+  // fired when a viewport is added to the toolGroup
+  TOOLGROUP_VIEWPORT_ADDED = 'CORNERSTONE_TOOLS_TOOLGROUP_VIEWPORT_ADDED',
+
+  // fired when a viewport is removed from the toolGroup
+  TOOLGROUP_VIEWPORT_REMOVED = 'CORNERSTONE_TOOLS_TOOLGROUP_VIEWPORT_REMOVED',
+
   /**
    * Triggers on the eventTarget when a mode of a tool is changed (active, passive, enabled and disabled).
    *

package/src/store/ToolGroupManager/ToolGroup.ts

@@ -239,6 +239,14 @@ export default class ToolGroup implements IToolGroup {
     if (runtimeSettings.get('useCursors')) {
       this.setViewportsCursorByToolName(toolName);
     }
+
+    const eventDetail = {
+      toolGroupId: this.id,
+      viewportId,
+      renderingEngineId: renderingEngineUIDToUse,
+    };
+
+    triggerEvent(eventTarget, Events.TOOLGROUP_VIEWPORT_ADDED, eventDetail);
   }
 
   /**
@@ -273,6 +281,14 @@ export default class ToolGroup implements IToolGroup {
         this.viewportsInfo.splice(indices[i], 1);
       }
     }
+
+    const eventDetail = {
+      toolGroupId: this.id,
+      viewportId,
+      renderingEngineId,
+    };
+
+    triggerEvent(eventTarget, Events.TOOLGROUP_VIEWPORT_REMOVED, eventDetail);
   }
 
   public setActiveStrategy(toolName: string, strategyName: string) {

package/src/tools/OrientationMarkerTool.ts

@@ -9,11 +9,13 @@ import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
 import { BaseTool } from './base';
 import {
   Enums,
+  eventTarget,
   getEnabledElementByIds,
   getRenderingEngines,
 } from '@cornerstonejs/core';
 import { filterViewportsWithToolEnabled } from '../utilities/viewportFilters';
 import { getToolGroup } from '../store/ToolGroupManager';
+import { Events } from '../enums';
 
 const OverlayMarkerType = {
   ANNOTATED_CUBE: 1,
@@ -36,8 +38,6 @@ class OrientationMarkerTool extends BaseTool {
 
   static OVERLAY_MARKER_TYPES = OverlayMarkerType;
 
-  configuration_invalidated = true;
-
   constructor(
     toolProps = {},
     defaultToolProps = {
@@ -88,18 +88,16 @@ class OrientationMarkerTool extends BaseTool {
   ) {
     super(toolProps, defaultToolProps);
     this.orientationMarkers = {};
-    this.configuration_invalidated = true;
   }
 
   onSetToolEnabled = (): void => {
     this.initViewports();
-    this.configuration_invalidated = true;
     this._subscribeToViewportEvents();
   };
 
   onSetToolActive = (): void => {
     this.initViewports();
-    this.configuration_invalidated = true;
+
     this._subscribeToViewportEvents();
   };
 
@@ -108,11 +106,6 @@ class OrientationMarkerTool extends BaseTool {
     this._unsubscribeToViewportNewVolumeSet();
   };
 
-  reset = () => {
-    this.configuration_invalidated = true;
-    this.initViewports();
-  };
-
   _getViewportsInfo = () => {
     const viewports = getToolGroup(this.toolGroupId).viewportsInfo;
 
@@ -130,50 +123,77 @@ class OrientationMarkerTool extends BaseTool {
   };
 
   _unsubscribeToViewportNewVolumeSet() {
-    const viewportsInfo = this._getViewportsInfo();
-    viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
-      const { viewport } = getEnabledElementByIds(
-        viewportId,
-        renderingEngineId
-      );
-      const { element } = viewport;
-
-      element.removeEventListener(
-        Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
-        this.reset
-      );
-
-      // // // unsubscribe to element resize events
-      const resizeObserver = this._resizeObservers.get(viewportId);
-      resizeObserver.unobserve(element);
+    const unsubscribe = () => {
+      const viewportsInfo = this._getViewportsInfo();
+      viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+        const { viewport } = getEnabledElementByIds(
+          viewportId,
+          renderingEngineId
+        );
+        const { element } = viewport;
+
+        element.removeEventListener(
+          Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+          this.initViewports.bind(this)
+        );
+
+        const resizeObserver = this._resizeObservers.get(viewportId);
+        resizeObserver.unobserve(element);
+      });
+    };
+
+    eventTarget.removeEventListener(Events.TOOLGROUP_VIEWPORT_ADDED, (evt) => {
+      if (evt.detail.toolGroupId !== this.toolGroupId) {
+        return;
+      }
+      unsubscribe();
+      this.initViewports();
     });
   }
 
   _subscribeToViewportEvents() {
-    const viewportsInfo = this._getViewportsInfo();
-
-    viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
-      const { viewport } = getEnabledElementByIds(
-        viewportId,
-        renderingEngineId
-      );
-      const { element } = viewport;
-
-      element.addEventListener(
-        Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
-        this.reset
-      );
-
-      const resizeObserver = new ResizeObserver(() => {
-        // Todo: i wish there was a better way to do this
-        setTimeout(() => {
-          this.reset();
-        }, 100);
+    const subscribeToElementResize = () => {
+      const viewportsInfo = this._getViewportsInfo();
+      viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+        const { viewport } = getEnabledElementByIds(
+          viewportId,
+          renderingEngineId
+        );
+        const { element } = viewport;
+        this.initViewports();
+
+        element.addEventListener(
+          Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+          this.initViewports.bind(this)
+        );
+
+        const resizeObserver = new ResizeObserver(() => {
+          // Todo: i wish there was a better way to do this
+          setTimeout(() => {
+            const { viewport } = getEnabledElementByIds(
+              viewportId,
+              renderingEngineId
+            );
+            this.resize(viewportId);
+            viewport.render();
+          }, 100);
+        });
+
+        resizeObserver.observe(element);
+
+        this._resizeObservers.set(viewportId, resizeObserver);
       });
+    };
 
-      resizeObserver.observe(element);
+    subscribeToElementResize();
 
-      this._resizeObservers.set(viewportId, resizeObserver);
+    eventTarget.addEventListener(Events.TOOLGROUP_VIEWPORT_ADDED, (evt) => {
+      if (evt.detail.toolGroupId !== this.toolGroupId) {
+        return;
+      }
+
+      subscribeToElementResize();
+      this.initViewports();
     });
   }
 
@@ -276,8 +296,6 @@ class OrientationMarkerTool extends BaseTool {
     viewport.addWidget(this.getToolName(), orientationWidget);
     renderWindow.render();
     viewport.getRenderingEngine().render();
-
-    this.configuration_invalidated = false;
   }
 
   private async createCustomActor() {

package/src/tools/annotation/BidirectionalTool.ts

@@ -2,10 +2,7 @@ import { vec2, vec3 } from 'gl-matrix';
 import { getEnabledElement, utilities as csUtils } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
 
-import {
-  getCalibratedLengthUnits,
-  getCalibratedScale,
-} from '../../utilities/getCalibratedUnits';
+import { getCalibratedLengthUnitsAndScale } from '../../utilities/getCalibratedUnits';
 import { roundNumber } from '../../utilities';
 import { AnnotationTool } from '../base';
 import throttle from '../../utilities/throttle';
@@ -40,7 +37,6 @@ import {
   TextBoxHandle,
   PublicToolProps,
   ToolProps,
-  InteractionTypes,
   SVGDrawingHelper,
 } from '../../types';
 import { BidirectionalAnnotation } from '../../types/ToolSpecificAnnotationTypes';
@@ -1272,17 +1268,32 @@ class BidirectionalTool extends AnnotationTool {
       }
 
       const { imageData, dimensions } = image;
-      const scale = getCalibratedScale(image);
-      const dist1 = this._calculateLength(worldPos1, worldPos2) / scale;
-      const dist2 = this._calculateLength(worldPos3, worldPos4) / scale;
-      const length = dist1 > dist2 ? dist1 : dist2;
-      const width = dist1 > dist2 ? dist2 : dist1;
-
       const index1 = transformWorldToIndex(imageData, worldPos1);
       const index2 = transformWorldToIndex(imageData, worldPos2);
       const index3 = transformWorldToIndex(imageData, worldPos3);
       const index4 = transformWorldToIndex(imageData, worldPos4);
 
+      const handles1 = [index1, index2];
+      const handles2 = [index3, index4];
+
+      const { scale: scale1, units: units1 } = getCalibratedLengthUnitsAndScale(
+        image,
+        handles1
+      );
+
+      const { scale: scale2, units: units2 } = getCalibratedLengthUnitsAndScale(
+        image,
+        handles2
+      );
+
+      const dist1 = this._calculateLength(worldPos1, worldPos2) / scale1;
+      const dist2 = this._calculateLength(worldPos3, worldPos4) / scale2;
+      const length = dist1 > dist2 ? dist1 : dist2;
+      const width = dist1 > dist2 ? dist2 : dist1;
+
+      const lengthUnit = dist1 > dist2 ? units1 : units2;
+      const widthUnit = dist1 > dist2 ? units2 : units1;
+
       this._isInsideVolume(index1, index2, index3, index4, dimensions)
         ? (this.isHandleOutsideImage = false)
         : (this.isHandleOutsideImage = true);
@@ -1290,7 +1301,9 @@ class BidirectionalTool extends AnnotationTool {
       cachedStats[targetId] = {
         length,
         width,
-        unit: getCalibratedLengthUnits(null, image),
+        unit: units1,
+        lengthUnit,
+        widthUnit,
       };
     }
 
@@ -1321,7 +1334,7 @@ class BidirectionalTool extends AnnotationTool {
 
 function defaultGetTextLines(data, targetId): string[] {
   const { cachedStats, label } = data;
-  const { length, width, unit } = cachedStats[targetId];
+  const { length, width, unit, lengthUnit, widthUnit } = cachedStats[targetId];
 
   const textLines = [];
   if (label) {
@@ -1334,8 +1347,8 @@ function defaultGetTextLines(data, targetId): string[] {
   // spaceBetweenSlices & pixelSpacing &
   // magnitude in each direction? Otherwise, this is "px"?
   textLines.push(
-    `L: ${roundNumber(length)} ${unit}`,
-    `W: ${roundNumber(width)} ${unit}`
+    `L: ${roundNumber(length)} ${lengthUnit || unit}`,
+    `W: ${roundNumber(width)} ${widthUnit || unit}`
   );
 
   return textLines;

package/src/tools/annotation/CircleROITool.ts

@@ -7,13 +7,8 @@ import {
 } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
 
-import {
-  getCalibratedLengthUnits,
-  getCalibratedAreaUnits,
-  getCalibratedScale,
-  getCalibratedAspect,
-} from '../../utilities/getCalibratedUnits';
-import { roundNumber } from '../../utilities';
+import { getCalibratedAspect } from '../../utilities/getCalibratedUnits';
+import { getCalibratedLengthUnitsAndScale, roundNumber } from '../../utilities';
 import throttle from '../../utilities/throttle';
 import {
   addAnnotation,
@@ -891,30 +886,30 @@ class CircleROITool extends AnnotationTool {
 
       const { dimensions, imageData, metadata, hasPixelSpacing } = image;
 
-      const worldPos1Index = transformWorldToIndex(imageData, worldPos1);
+      const pos1Index = transformWorldToIndex(imageData, worldPos1);
 
-      worldPos1Index[0] = Math.floor(worldPos1Index[0]);
-      worldPos1Index[1] = Math.floor(worldPos1Index[1]);
-      worldPos1Index[2] = Math.floor(worldPos1Index[2]);
+      pos1Index[0] = Math.floor(pos1Index[0]);
+      pos1Index[1] = Math.floor(pos1Index[1]);
+      pos1Index[2] = Math.floor(pos1Index[2]);
 
-      const worldPos2Index = transformWorldToIndex(imageData, worldPos2);
+      const pos2Index = transformWorldToIndex(imageData, worldPos2);
 
-      worldPos2Index[0] = Math.floor(worldPos2Index[0]);
-      worldPos2Index[1] = Math.floor(worldPos2Index[1]);
-      worldPos2Index[2] = Math.floor(worldPos2Index[2]);
+      pos2Index[0] = Math.floor(pos2Index[0]);
+      pos2Index[1] = Math.floor(pos2Index[1]);
+      pos2Index[2] = Math.floor(pos2Index[2]);
 
       // Check if one of the indexes are inside the volume, this then gives us
       // Some area to do stats over.
 
-      if (this._isInsideVolume(worldPos1Index, worldPos2Index, dimensions)) {
-        const iMin = Math.min(worldPos1Index[0], worldPos2Index[0]);
-        const iMax = Math.max(worldPos1Index[0], worldPos2Index[0]);
+      if (this._isInsideVolume(pos1Index, pos2Index, dimensions)) {
+        const iMin = Math.min(pos1Index[0], pos2Index[0]);
+        const iMax = Math.max(pos1Index[0], pos2Index[0]);
 
-        const jMin = Math.min(worldPos1Index[1], worldPos2Index[1]);
-        const jMax = Math.max(worldPos1Index[1], worldPos2Index[1]);
+        const jMin = Math.min(pos1Index[1], pos2Index[1]);
+        const jMax = Math.max(pos1Index[1], pos2Index[1]);
 
-        const kMin = Math.min(worldPos1Index[2], worldPos2Index[2]);
-        const kMax = Math.max(worldPos1Index[2], worldPos2Index[2]);
+        const kMin = Math.min(pos1Index[2], pos2Index[2]);
+        const kMax = Math.max(pos1Index[2], pos2Index[2]);
 
         const boundsIJK = [
           [iMin, iMax],
@@ -942,7 +937,11 @@ class CircleROITool extends AnnotationTool {
           worldPos2
         );
         const isEmptyArea = worldWidth === 0 && worldHeight === 0;
-        const scale = getCalibratedScale(image);
+        const handles = [pos1Index, pos2Index];
+        const { scale, units, areaUnits } = getCalibratedLengthUnitsAndScale(
+          image,
+          handles
+        );
         const aspect = getCalibratedAspect(image);
         const area = Math.abs(
           Math.PI *
@@ -986,9 +985,9 @@ class CircleROITool extends AnnotationTool {
           statsArray: stats.array,
           pointsInShape: pointsInShape,
           isEmptyArea,
-          areaUnit: getCalibratedAreaUnits(null, image),
+          areaUnit: areaUnits,
           radius: worldWidth / 2 / scale,
-          radiusUnit: getCalibratedLengthUnits(null, image),
+          radiusUnit: units,
           perimeter: (2 * Math.PI * (worldWidth / 2)) / scale,
           modalityUnit,
         };

package/src/tools/annotation/EllipticalROITool.ts

@@ -7,10 +7,7 @@ import {
 } from '@cornerstonejs/core';
 import type { Types } from '@cornerstonejs/core';
 
-import {
-  getCalibratedAreaUnits,
-  getCalibratedScale,
-} from '../../utilities/getCalibratedUnits';
+import { getCalibratedLengthUnitsAndScale } from '../../utilities/getCalibratedUnits';
 import { roundNumber } from '../../utilities';
 import throttle from '../../utilities/throttle';
 import {
@@ -56,10 +53,7 @@ import { EllipticalROIAnnotation } from '../../types/ToolSpecificAnnotationTypes
 import triggerAnnotationRenderForViewportIds from '../../utilities/triggerAnnotationRenderForViewportIds';
 import { pointInShapeCallback } from '../../utilities/';
 import { StyleSpecifier } from '../../types/AnnotationStyle';
-import {
-  ModalityUnitOptions,
-  getModalityUnit,
-} from '../../utilities/getModalityUnit';
+import { getModalityUnit } from '../../utilities/getModalityUnit';
 import { isViewportPreScaled } from '../../utilities/viewport/isViewportPreScaled';
 import { BasicStatsCalculator } from '../../utilities/math/basic';
 
@@ -791,12 +785,7 @@ class EllipticalROITool extends AnnotationTool {
           areaUnit: null,
         };
 
-        this._calculateCachedStats(
-          annotation,
-          viewport,
-          renderingEngine,
-          enabledElement
-        );
+        this._calculateCachedStats(annotation, viewport, renderingEngine);
       } else if (annotation.invalidated) {
         this._throttledCalculateCachedStats(
           annotation,
@@ -972,12 +961,7 @@ class EllipticalROITool extends AnnotationTool {
     return renderStatus;
   };
 
-  _calculateCachedStats = (
-    annotation,
-    viewport,
-    renderingEngine,
-    enabledElement
-  ) => {
+  _calculateCachedStats = (annotation, viewport, renderingEngine) => {
     const data = annotation.data;
     const { element } = viewport;
 
@@ -1010,34 +994,34 @@ class EllipticalROITool extends AnnotationTool {
         continue;
       }
 
-      const { dimensions, imageData, metadata, hasPixelSpacing } = image;
+      const { dimensions, imageData, metadata } = image;
 
-      const worldPos1Index = transformWorldToIndex(imageData, worldPos1);
+      const pos1Index = transformWorldToIndex(imageData, worldPos1);
 
-      worldPos1Index[0] = Math.floor(worldPos1Index[0]);
-      worldPos1Index[1] = Math.floor(worldPos1Index[1]);
-      worldPos1Index[2] = Math.floor(worldPos1Index[2]);
+      pos1Index[0] = Math.floor(pos1Index[0]);
+      pos1Index[1] = Math.floor(pos1Index[1]);
+      pos1Index[2] = Math.floor(pos1Index[2]);
 
-      const worldPos2Index = transformWorldToIndex(imageData, worldPos2);
+      const post2Index = transformWorldToIndex(imageData, worldPos2);
 
-      worldPos2Index[0] = Math.floor(worldPos2Index[0]);
-      worldPos2Index[1] = Math.floor(worldPos2Index[1]);
-      worldPos2Index[2] = Math.floor(worldPos2Index[2]);
+      post2Index[0] = Math.floor(post2Index[0]);
+      post2Index[1] = Math.floor(post2Index[1]);
+      post2Index[2] = Math.floor(post2Index[2]);
 
       // Check if one of the indexes are inside the volume, this then gives us
       // Some area to do stats over.
 
-      if (this._isInsideVolume(worldPos1Index, worldPos2Index, dimensions)) {
+      if (this._isInsideVolume(pos1Index, post2Index, dimensions)) {
         this.isHandleOutsideImage = false;
 
-        const iMin = Math.min(worldPos1Index[0], worldPos2Index[0]);
-        const iMax = Math.max(worldPos1Index[0], worldPos2Index[0]);
+        const iMin = Math.min(pos1Index[0], post2Index[0]);
+        const iMax = Math.max(pos1Index[0], post2Index[0]);
 
-        const jMin = Math.min(worldPos1Index[1], worldPos2Index[1]);
-        const jMax = Math.max(worldPos1Index[1], worldPos2Index[1]);
+        const jMin = Math.min(pos1Index[1], post2Index[1]);
+        const jMax = Math.max(pos1Index[1], post2Index[1]);
 
-        const kMin = Math.min(worldPos1Index[2], worldPos2Index[2]);
-        const kMax = Math.max(worldPos1Index[2], worldPos2Index[2]);
+        const kMin = Math.min(pos1Index[2], post2Index[2]);
+        const kMax = Math.max(pos1Index[2], post2Index[2]);
 
         const boundsIJK = [
           [iMin, iMax],
@@ -1065,7 +1049,13 @@ class EllipticalROITool extends AnnotationTool {
           worldPos2
         );
         const isEmptyArea = worldWidth === 0 && worldHeight === 0;
-        const scale = getCalibratedScale(image);
+
+        const handles = [pos1Index, post2Index];
+        const { scale, areaUnits } = getCalibratedLengthUnitsAndScale(
+          image,
+          handles
+        );
+
         const area =
           Math.abs(Math.PI * (worldWidth / 2) * (worldHeight / 2)) /
           scale /
@@ -1095,7 +1085,6 @@ class EllipticalROITool extends AnnotationTool {
         );
 
         const stats = this.configuration.statsCalculator.getStatistics();
-
         cachedStats[targetId] = {
           Modality: metadata.Modality,
           area,
@@ -1105,7 +1094,7 @@ class EllipticalROITool extends AnnotationTool {
           statsArray: stats.array,
           pointsInShape,
           isEmptyArea,
-          areaUnit: getCalibratedAreaUnits(null, image),
+          areaUnit: areaUnits,
           modalityUnit,
         };
       } else {

package/src/tools/annotation/PlanarFreehandROITool.ts

@@ -7,11 +7,8 @@ import {
 import type { Types } from '@cornerstonejs/core';
 import { vec3 } from 'gl-matrix';
 
-import {
-  getCalibratedAreaUnits,
-  getCalibratedScale,
-} from '../../utilities/getCalibratedUnits';
-import { roundNumber } from '../../utilities';
+import { getCalibratedLengthUnitsAndScale } from '../../utilities/getCalibratedUnits';
+import { math, roundNumber } from '../../utilities';
 import { polyline } from '../../utilities/math';
 import { filterAnnotationsForDisplay } from '../../utilities/planar';
 import throttle from '../../utilities/throttle';
@@ -727,11 +724,6 @@ class PlanarFreehandROITool extends ContourSegmentationBaseTool {
       const deltaInX = vec3.distance(originalWorldPoint, deltaXPoint);
       const deltaInY = vec3.distance(originalWorldPoint, deltaYPoint);
 
-      const scale = getCalibratedScale(image);
-      let area = polyline.getArea(canvasCoordinates) / scale / scale;
-      // Convert from canvas_pixels ^2 to mm^2
-      area *= deltaInX * deltaInY;
-
       const worldPosIndex = csUtils.transformWorldToIndex(imageData, points[0]);
       worldPosIndex[0] = Math.floor(worldPosIndex[0]);
       worldPosIndex[1] = Math.floor(worldPosIndex[1]);
@@ -764,6 +756,59 @@ class PlanarFreehandROITool extends ContourSegmentationBaseTool {
         kMax = Math.max(kMax, worldPosIndex[2]);
       }
 
+      const worldPosIndex2 = csUtils.transformWorldToIndex(
+        imageData,
+        points[1]
+      );
+      worldPosIndex2[0] = Math.floor(worldPosIndex2[0]);
+      worldPosIndex2[1] = Math.floor(worldPosIndex2[1]);
+      worldPosIndex2[2] = Math.floor(worldPosIndex2[2]);
+
+      const { scale, areaUnits } = getCalibratedLengthUnitsAndScale(
+        image,
+        () => {
+          const polyline = data.contour.polyline;
+          const numPoints = polyline.length;
+          const projectedPolyline = new Array(numPoints);
+
+          for (let i = 0; i < numPoints; i++) {
+            projectedPolyline[i] = viewport.worldToCanvas(polyline[i]);
+          }
+
+          const {
+            maxX: canvasMaxX,
+            maxY: canvasMaxY,
+            minX: canvasMinX,
+            minY: canvasMinY,
+          } = math.polyline.getAABB(projectedPolyline);
+
+          const topLeftBBWorld = viewport.canvasToWorld([
+            canvasMinX,
+            canvasMinY,
+          ]);
+
+          const topLeftBBIndex = csUtils.transformWorldToIndex(
+            imageData,
+            topLeftBBWorld
+          );
+
+          const bottomRightBBWorld = viewport.canvasToWorld([
+            canvasMaxX,
+            canvasMaxY,
+          ]);
+
+          const bottomRightBBIndex = csUtils.transformWorldToIndex(
+            imageData,
+            bottomRightBBWorld
+          );
+
+          return [topLeftBBIndex, bottomRightBBIndex];
+        }
+      );
+      let area = polyline.getArea(canvasCoordinates) / scale / scale;
+      // Convert from canvas_pixels ^2 to mm^2
+      area *= deltaInX * deltaInY;
+
       // Expand bounding box
       const iDelta = 0.01 * (iMax - iMin);
       const jDelta = 0.01 * (jMax - jMin);
@@ -852,7 +897,7 @@ class PlanarFreehandROITool extends ContourSegmentationBaseTool {
         stdDev: stats.stdDev?.value,
         statsArray: stats.array,
         pointsInShape: pointsInShape,
-        areaUnit: getCalibratedAreaUnits(null, image),
+        areaUnit: areaUnits,
         modalityUnit,
       };
     }